Sidebar

The Sidebar is located on the left side of the screen and lets users access different sections of your application.

On mobile devices, the sidebar will collapse into a hamburger button, which can be opened by the user to reveal the sections.

It's best to load this component in __layout.svelte since the Sidebar will remain rendered on each page. You'll also want to use the PageSidebarWrapper to slot the rest of your content with the proper paddings.

Props

logo string
Pass a reference in for your logo that will be included at the top of the sidebar.

href string /
Where to navigate if the user clicks on the logo.

flat boolean true
A flat sidebar will not have any nesting but will instead label groups. Settings with to false will create groups into dropdowns. Icons will not be displayed for sections inside of the group, instead the group will take the icon of the first section and display it, if there is an icon there.

padding string roomy
You can change this to "compact" to increase information density.

sections Array<Object>
These objects will be all of the sections in the sidebar.

section[].icon string
If you want your section to have an icon, pass an svg or png icon. It is strongly recommended to use an svg.

section[].label string
This is the text that will be displayed for the user.

section[].group string
If you want to divide your sidebar into groups, you can add a section property. In this example, the sidebar is divided into four sections, "Getting Started", "Layouts", "Components", and "Utils"

section[].id string
An id that you can pass to the section to make a reference of it. If you'll be adding notifications counts next to any of the sidebar items, it's useful to know the ID so that you can update the notification counter easily. If you don't set an ID, Bubbles will set one for you.

section[].href string
This is the page where the user will be routed. Bubbles will automatically highlight the active section and show loading indicators if the page is taking a while to load.

section[].href_aliases Array<string>
There can be times when you have pages with multiple href values. For example, it's common that / and /dashboard might be the same page. As a result, if the initial href is set to /dashboard and the user navigates to /, the correct section will not be shown as active. Add an array of strings here that share that href here to correct this behavior.

section[].notifications Integer
If you want to set an initial value for notifications when the component mounts you can do so here. Otherwise, you'll update notifications counts using the pageStore

section[].hidden boolean
The section will not be rendered to the DOM.

<!-- __layout.svelte -->
<script>
  import { Sidebar, SidebarPageWrapper, Modal, ToastContainer } from "$lib/stores/stores";

  const sidebarConfig = {
    logo: "/logo.svg",
    sections: [
      {
        label: "Welcome",
        id: "welcome",
        href: "/",
        section: "Getting Started",
        //icon: "" add your icons if you'll be using them
      },
      {
        label: "Installation",
        id: "installation",
        href: "#installation",
        section: "Getting Started",
      },
      {
        label: "Usage",
        id: "usage",
        href: "#usage",
        section: "Getting Started",
      },
      {
        label: "Colors",
        id: "colors",
        href: "#colors",
        section: "Getting Started",
      },
      {
        label: "Page Wrappers",
        id: "page-wrappers",
        href: "#page-wrappers",
        section: "Layouts",
      },
      {
        label: "Page Rows",
        id: "page-rows",
        href: "#page-rows",
        section: "Layouts",
      },
      {
        label: "Page Columns",
        id: "page-columns",
        href: "#page-columns",
        section: "Layouts",
      },
      {
        label: "Page Grids",
        id: "page-grids",
        href: "#page-grids",
        section: "Layouts",
      },
      {
        label: "Page Center",
        id: "page-center",
        href: "#page-center",
        section: "Layouts",
      },
    ],
  };
</script>

<ToastContainer />

<Sidebar {...sidebarConfig} />
<SidebarPageWrapper>
  <slot />
</SidebarPageWrapper>

<Modal />