Sidebar Components

Default sidebar

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

  let uid = 1;
  let links = [
    {
      id: uid++,
      name: 'Dashboard',
      href: '/',
      icon: ChartPieSolid,
      iconSize: 16,
      iconClass: "text-blue-500 dark:text-white",
    },
    {
      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,
      href: '/'
    },
    {
      id: uid++,
      name: 'Users',
      icon: UserSolid,
      iconSize: 16,
      href: '/'
    },
    {
      id: uid++,
      name: 'Sign In',
      icon: LoginSolid,
      iconSize: 16,
      href: '/'
    },
    {
      id: uid++,
      name: 'Setting',
      icon: CogSolid,
      iconSize: 16,
      href: '/'
    }
  ];
</script>

<Sidebar {links} />

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 links2 = [
    {
      id: uid++,
      name: 'Dashboard',
      href: '/',
      icon: ChartPieSolid,
      iconSize: 16,
    },
    {
      id: uid++,
      name: 'E-commerce',
      icon: ShoppingBagSolid,
      iconSize: 16,
      children: [
        {
          id: uid++,
          name: 'Product',
          href: '/'
        },
        {
          id: uid++,
          name: 'Billing',
          href: '/'
        },
        {
          id: uid++,
          name: 'Invoice',
          href: '/'
        }
      ]
    },
    {
      id: uid++,
      name: 'Kanban',
      icon: TableSolid,
      iconSize: 16,
      href: '/'
    },
    {
      id: uid++,
      name: 'Inbox',
      icon: InboxInSolid,
      iconSize: 16,
      href: '/'
    },
    {
      id: uid++,
      name: 'Users',
      icon: UserSolid,
      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,
      href: '/'
    },
    {
      id: uid++,
      name: 'Setting',
      icon: CogSolid,
      iconSize: 16,
      href: '/'
    }
  ];
</script>

<Sidebar links={links2} {site} />

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>

Props

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

References

Flowbite Sidebar