Header

The Header is a special component that lives outside a Row. It features a large title, breadcrumbs, and a back button if needed.

Bubbles will calculate the labels from the breadcrumbs using the path if you set breadcrumbs to true. For the last breadcrumb it will use the page title that you set in the Header.

For example, a settings page path of /settings/profile would give breadcrumbs of "Settings / Profile". Sometimes it's common to add the ID of an element in the href, such as /invoices/inv_0938487984654. In this case, the breadcrumb will look for the title for the last element and show something like "Invoices / #23" (or whatever the title of the page is in the Header).

In a scenario where your page has two dynamic links such as /pokedex/[pokemon_id]/[move_id] you may want to pass in more human readable labels to the breadcrumbs using the breadcrumb_labels property, or overwrite them completely by passing in an array to the breadcrumbs property.

Props

title string
This is the main title for the page. You can either pass it as a prop to the Header component, or update the $pageStore.title property which will do the same thing.

subtitle string
You can add a subtitle to the page. This accepts html so you can add anchor tags. If you add a subtitle and are on a nested page, you will not see any breadcrumbs.

breadcrumbs boolean|array<Breadcrumb> true
Pass in false if you do not want to display breadcrumbs. If you want to override the automatic breadcrumbs, you can pass in an array of objects with the label and href of the breadcrumb you want to add.

Show Details


Breadcrumb.label `string` The text of the breadcrumb displayed on the screen.
Breadcrumb.href `string` The page to which the user will be navigated when clicking the crumb.

breadcrumb_labels Array<String>
An array of string to overwrite the just labels for breadcrumbs.

buttons object<IconButton>
Buttons are an array of IconButtons that will show up on the right side of the component.

<script>
import { Header, fuzzySearch } from "bubbles-ui";
import sections from "$assets/utils/sidebar-sections"; //Just for the demo, since there is a search element here

const props = {
  title: "Page Title", //This will automatically set the page title for you unless you overwrite it with svelte:head
  breadcrumb_labels: ["Hello", "World"] //pass labels if you want to set your breadcrumbs manually. Generally only required if you have two dynamic IDs in your URLs next to each other
  buttons: [
    {
      icon: "add" //use one of the bundled icons or pass in your own svg
      onclick: (event) => {
        someFunction(), //you can all a function on click, like opening a modal;
      }
      href: null, //if you want this button to bring you to a different page. The benefit of href instead of onclick here is that the page will prefetch on hover for a faster load
      options: [] //if you want to open a menu of options, you can pass them in here
    },
    {
      icon: "search",
      color: "gray-lighter",
      search: true,
      typeahead: (input) => {
        const filtered = fuzzySearch(input, sections, { keys: ["id"], sort: true });

        return Promise.resolve(
          filtered.map((obj) => {
            return { label: obj.label, value: obj.id, href: `/${obj.id}`, new_page: false };
          })
        );
      },
    },
    {
      icon: "more" //use one of the bundled icons or pass in your own svg
      onclick: null,
      href: null,
      options: [
        {
          label: "Option 1",
          caption: "This is an option caption"
          href: "/about"
        },
        {
          label: "Option 2",
          caption: "This is an example with onclick",
          onclick: (event) => { //can use onclick instead of href
            someFunction()
          }
        }
      ]
    }
  ]
}

const custom_breadcrumbs = {
  title: "Page Title",
  breadcrumbs: [
    {
      label: "Home",
      href: "/index"
    },
    {
      label: "Nested Route",
      href: "/index/nested-route"
    }
  ]
}
</script>

<Header {...props} />