Sidebar Components

Default sidebar

<script>
  import { Sidebar, SidebarItem } from 'flowbite-svelte';
  import {
    ChartPieSolid,
    ShoppingBagSolid,
    TableSolid,
    InboxInSolid,
    UserSolid,
    LoginSolid,
    CogSolid
  } from 'svelte-heros';

  let uid = 1;
  let sidebarItem1 = [
    {
      id: uid++,
      name: 'Dashboard',
      href: '/',
      icon: ChartPieSolid,
      iconSize: 16,
      iconClass: "text-blue-500",
    },
    {
      id: uid++,
      name: 'E-commerce',
      icon: ShoppingBagSolid,
      iconSize: 16,
      iconClass: "text-green-500",
      href: '/',
      subtext: '<span class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200">3</span>'
    },
    {
      id: uid++,
      name: 'Kanban',
      icon: TableSolid,
      iconSize: 16,
      iconClass: "text-red-500",
      href: '/',
      subtext: '<span class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>'
    },
    {
      id: uid++,
      name: 'Inbox',
      icon: InboxInSolid,
      iconSize: 16,
      iconClass: "text-pink-500",
      href: '/'
    },
    {
      id: uid++,
      name: 'Users',
      icon: UserSolid,
      iconSize: 16,
      iconClass: "text-purple-500",
      href: '/'
    },
    {
      id: uid++,
      name: 'Sign In',
      icon: LoginSolid,
      iconSize: 16,
      iconClass: "text-green-300",
      iconClass: "text-indigo-500",
      href: '/'
    },
    {
      id: uid++,
      name: 'Setting',
      icon: CogSolid,
      iconSize: 16,
      iconClass: "text-yellow-300",
      href: '/'
    }
  ];
  
</script>

<Sidebar {site}>
  <SidebarItem links={sidebarItem1} />
</Sidebar>

Multi-level dropdown

<script>
  import { Sidebar } from 'flowbite-svelte';
  let site = {
    name: 'Flowbite-Svelte',
    href: '/',
    img: '/images/flowbite-svelte-logo-30.png'
  };
  let uid = 1;
  let sidebarItem2 = [
    {
      id: uid++,
      name: 'Dashboard',
      href: '/',
      icon: ChartPieSolid,
      iconSize: 16,
      iconClass: "text-red-500",
    },
    {
      id: uid++,
      name: 'E-commerce',
      icon: ShoppingBagSolid,
      iconSize: 16,
      iconClass: "text-blue-500",
      children: [
        {
          id: uid++,
          name: 'Product',
          href: '/'
        },
        {
          id: uid++,
          name: 'Billing',
          href: '/'
        },
        {
          id: uid++,
          name: 'Invoice',
          href: '/'
        }
      ]
    },
    {
      id: uid++,
      name: 'Kanban',
      icon: TableSolid,
      iconSize: 16,
      iconClass: "text-purple-500",
      href: '/'
    },
    {
      id: uid++,
      name: 'Inbox',
      icon: InboxInSolid,
      iconSize: 16,
      iconClass: "text-yellow-500",
      href: '/'
    },
    {
      id: uid++,
      name: 'Users',
      icon: UserSolid,
      iconClass: "text-green-500",
      iconSize: 16,
      children: [
        {
          id: uid++,
          name: 'Sign In',
          href: '/'
        },
        {
          id: uid++,
          name: 'Sign Out',
          href: '/'
        },
        {
          id: uid++,
          name: 'Profile',
          href: '/'
        }
      ]
    },
    {
      id: uid++,
      name: 'Sign In',
      icon: LoginSolid,
      iconSize: 16,
      iconClass: "text-pink-500",
      href: '/'
    },
    {
      id: uid++,
      name: 'Setting',
      icon: CogSolid,
      iconSize: 16,
      iconClass: "text-indigo-500",
      href: '/'
    }
  ];

</script>

 <Sidebar  {site} >
    <SidebarItem links={sidebarItem2} />
</Sidebar>

CTA button

<script>
  let cta ={
    label:'Beta',
    text: 'Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.'
  }
</script>

<Sidebar {cta} >
  <SidebarItem links={sidebarItem1} />
</Sidebar>

Content separator

Use the `border` prop to add a top border.

<script>
  let sidebarItem3 = [
    {
      id: uid++,
      name: 'Upgrade to Pro',
      href: '/',
      icon: ChartPieSolid,
      iconSize: 16,
      iconClass: "text-blue-500 dark:text-red-500",
    },
    {
      id: uid++,
      name: 'Documentation',
      href: '/',
      icon: ShoppingBagSolid,
      iconSize: 16,
      iconClass: "text-green-500 dark:text-purple-500",
    },
    {
      id: uid++,
      name: 'Components',
      href: '/',
      icon: TableSolid,
      iconSize: 16,
      iconClass: "text-pink-500 dark:text-indigo-500",
    },
    {
      id: uid++,
      name: 'Help',
      href: '/',
      icon: UserSolid,
      iconSize: 16,
      iconClass: "text-yellow-500 dark:text-blue-500",
    },
  ]
</script>

<Sidebar {site}>
  <SidebarItem links={sidebarItem1} />
  <SidebarItem links={sidebarItem3} border />
</Sidebar>

Props

The component has the following props, type, and default values. See types page for type information.

Sidebar

SidebarDropdown

SidebarItem

References