Svelte Sidebar

Our Svelte Sidebars are powerful and customisable responsive navigation components for any type of vertical navigation. A Svelte Sidebar comes with built-in support for branding, navigation, and more. Now keep reading some examples to see how Svelte Sidebars work.

Example

Svelte side navbar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

Copy

<SideBar toggle={sideBarToggle} on:click={changeToggle}>
  <ul class="navbar-nav" slot="links" id="navbar-nav">
    <SideBarItem link={ { name: 'Dashboard', icon: 'ni ni-shop text-primary', children: 0, isActive: activeSidebarItems[0].dashboard } }/>
    <SideBarItem link={ { name: 'Icons', icon: 'ni ni-shop text-warning', children: 0, isActive: activeSidebarItems[0].dashboard } }/>
  </ul>
</SideBar>

Collapsible menus Pro

Copy

<SideBar toggle={sideBarToggle} on:click={changeToggle}>
  <ul class="navbar-nav" slot="links" id="navbar-nav">
    <SideBarItem link={ { name: 'Dashboards', icon: 'ni ni-shop text-primary', children: 2, isActive: activeSidebarItems[0].dashboard } }>
      <SideBarItem
      link={ { name: 'Dashboard', path: '/dashboard', children: 0 } } />
      <SideBarItem
        link={ { name: 'Alternative', path: '/dashboard/alternative', children: 0 } } />
    </SideBarItem>
  </ul>
</SideBar>