Svelte Sidebar - Flowbite
Use the sidebar component to show a list of menu items and multi-level dropdown items on either side of the page to navigate on your website
The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level dropdown items, call to actions elements, and more.
Disclaimer: this sidebar component is based on this sidebar menu plugin.
Setup #
- Svelte
<script lang="ts">
import { Sidebar, SidebarBrand, SidebarCta, SidebarDropdownItem, SidebarDropdownWrapper, SidebarGroup, SidebarItem, SidebarWrapper } from "flowbite-svelte";
</script>Default sidebar #
Use this example to show a responsive list of menu items inside the sidebar with icons and labels.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Adding links and active class #
Utilize the href prop within the SidebarItem component to incorporate a hyperlink. To initiate the application of the active class, include the activeUrl prop within the Sidebar component:
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const activeClass = "flex items-center p-2 text-base font-normal text-white bg-primary-600 dark:bg-primary-700 rounded-lg dark:text-white hover:bg-primary-800 dark:hover:bg-primary-800";
const nonActiveClass = "flex items-center p-2 text-base font-normal text-green-900 rounded-lg dark:text-white hover:bg-green-100 dark:hover:bg-green-700";
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
classes={{ nonactive: nonActiveClass, active: activeClass }}
position="absolute"
class="z-50 h-full"
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/docs/components/sidebar">
{#snippet icon()}
<UserSolid class="text-primary-500 h-5 w-5 transition duration-75 " />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Control the active and nonactive class by using activeClass and nonActiveClass:
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const activeClass = "flex items-center p-2 text-base font-normal text-primary-900 bg-primary-200 dark:bg-primary-700 rounded-lg dark:text-white hover:bg-primary-100 dark:hover:bg-gray-700";
const nonActiveClass = "flex items-center p-2 text-base font-normal text-green-900 rounded-lg dark:text-white hover:bg-green-100 dark:hover:bg-green-700";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
position="absolute"
classes={{ nonactive: nonActiveClass, active: activeClass }}
class="z-50 h-full"
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/" active>
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} active={false}>
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} active={false}>
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar" active={false}>
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>You can control icon class by changing the class prop in the Icon component.
Always open #
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<div class="relative">
<Sidebar
alwaysOpen
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Multi-level dropdown #
Use this sidebar example to create multi-level menu items by using the SidebarDropdownWrapper and SidebarDropdownItem components.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid, ArrowRightToBracketOutline, EditSolid, ShoppingBagSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
class="z-50 h-full"
>
<SidebarGroup>
<SidebarItem label="Dashboard">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarDropdownWrapper label="E-commerce" btnClass="p-2">
{#snippet icon()}
<ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Sidebar" href="/docs/components/sidebar" />
<SidebarItem label="Billing" />
<SidebarItem label="Invoice" />
</SidebarDropdownWrapper>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Users">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Sign In">
{#snippet icon()}
<ArrowRightToBracketOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Sign Up">
{#snippet icon()}
<EditSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>You can change the icons using arrowup and arrowdown slots.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, ChevronDoubleUpOutline, ChevronDoubleDownOutline, ShoppingBagSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
position="absolute"
class="z-50 h-full"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
<SidebarItem label="Dashboard">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarDropdownWrapper label="E-commerce" btnClass="p-2">
{#snippet icon()}
<ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet arrowup()}
<ChevronDoubleUpOutline class="h-6 w-6" />
{/snippet}
{#snippet arrowdown()}
<ChevronDoubleDownOutline class="h-6 w-6" />
{/snippet}
<SidebarItem label="Sidebar" href="/docs/components/sidebar" />
<SidebarItem label="Billing" />
<SidebarItem label="Invoice" />
</SidebarDropdownWrapper>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Content separator #
Separate the content inside the sidebar component by applying a border separator to the SidebarGroup component.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid, BookSolid, RestoreWindowOutline, FireSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
<SidebarGroup border>
<SidebarItem label="Upgrade to Pro" href="/">
{#snippet icon()}
<FireSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Documentation" href="/">
{#snippet icon()}
<BookSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Components" href="/">
{#snippet icon()}
<RestoreWindowOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>CTA button #
Use this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, SidebarCta, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid, CloseOutline } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/docs/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarCta label="Beta">
{#snippet icon()}
<button
type="button"
class="bg-primary-50 text-primary-900 hover:bg-primary-200 focus:ring-primary-400 dark:bg-primary-900 dark:text-primary-400 dark:hover:bg-primary-800 -mx-1.5 -my-1.5 ms-auto inline-flex h-6 w-6 rounded-lg p-1 focus:ring-2"
data-collapse-toggle="dropdown-cta"
aria-label="Close"
>
<span class="sr-only">Close</span>
<CloseOutline class="h-4 w-4" />
</button>
{/snippet}
<p class="text-primary-900 dark:text-primary-400 mb-3 text-sm">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
<a class="text-primary-900 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300 text-sm underline" href="/">Turn new navigation off</a>
</SidebarCta>
</SidebarGroup>
</Sidebar>
<div class="h-[450px] overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Logo branding #
Show the logo of your brand and link back to the homepage from the top part of the sidebar.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, SidebarBrand, uiHelpers, CloseButton } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const imgClass = "h-6 w-6";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
const site = {
name: "Flowbite Svelte",
href: "/",
img: "/images/flowbite-svelte-icon-logo.svg"
};
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<CloseButton onclick={closeDemoSidebar} color="gray" class="absolute top-3 right-1 p-2 md:hidden" />
<SidebarGroup>
<SidebarBrand {site} {imgClass} />
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Branding using children #
The following example shows how to use children for your branding.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, SidebarBrand, uiHelpers, CloseButton } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<CloseButton onclick={closeDemoSidebar} color="gray" class="absolute top-3 right-1 p-2 md:hidden" />
<SidebarGroup>
<SidebarBrand>
<img src="/images/flowbite-svelte-icon-logo.svg" alt="Flowbite Svelte" class="h-6 w-6" />
<span class="ml-2 self-center text-xl font-semibold whitespace-nowrap dark:text-white">Svelte 5 UI Lib</span>
</SidebarBrand>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>A11y #
Use Tab and Shift+Tab to navigate between buttons or links in the sidebar. Press ESC to close it on a small screen.
Close button #
Use the following example to show a close button in the sidebar for a small screen.
- Svelte
<script lang="ts">
import { CloseButton, Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full pt-6"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<CloseButton onclick={closeDemoSidebar} color="gray" class="absolute top-2 right-2 p-2 md:hidden" />
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Using object #
You can use object for the sidebar items as the following example.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const sidebarEx1 = [
{
label: "Dashboard",
href: "/",
icon: ChartOutline
},
{
label: "Kanban",
href: "/",
icon: GridSolid,
subContent: "Pro"
},
{
label: "Inbox",
href: "/",
icon: MailBoxSolid,
subContent: "3"
},
{
label: "Sidebar",
href: "/components/sidebar",
icon: UserSolid
}
];
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50 h-full"
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
{#each sidebarEx1 as { label, href, icon: Icon, subContent }}
<SidebarItem {label} {href} {spanClass}>
{#snippet icon()}
<Icon class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"></Icon>
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
{subContent}
</span>
{/snippet}
</SidebarItem>
{/each}
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Single selection #
The following example shows to open only one dropdown when you click another dropdown menu.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, UserSolid, EditSolid, ShoppingBagSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
class="z-50 h-full"
>
<SidebarGroup>
<SidebarItem label="Dashboard">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarDropdownWrapper label="Shop" btnClass="p-2">
{#snippet icon()}
<ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Products" href="" />
</SidebarDropdownWrapper>
<SidebarDropdownWrapper label="Profile" btnClass="p-2">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Projects" href="/" />
</SidebarDropdownWrapper>
<SidebarItem label="Sidebar" {spanClass} href="/components/sidebar">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
<SidebarGroup border>
<SidebarDropdownWrapper label="Setting" btnClass="p-2">
{#snippet icon()}
<EditSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Account" href="" />
</SidebarDropdownWrapper>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>All open #
To open all dropdown menus, set isSingle={false}.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, UserSolid, EditSolid, ShoppingBagSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
isSingle={false}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
class="z-50 h-full"
>
<SidebarGroup>
<SidebarItem label="Dashboard">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarDropdownWrapper label="Shop" btnClass="p-2">
{#snippet icon()}
<ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Products" href="" />
</SidebarDropdownWrapper>
<SidebarDropdownWrapper label="Profile" btnClass="p-2">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Projects" href="/" />
</SidebarDropdownWrapper>
<SidebarItem label="Sidebar" {spanClass} href="/components/sidebar">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
<SidebarGroup border>
<SidebarDropdownWrapper label="Setting" btnClass="p-2">
{#snippet icon()}
<EditSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Account" href="" />
</SidebarDropdownWrapper>
</SidebarGroup>
</Sidebar>
<div class="h-[480px] overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Transition #
You can add own transition by setting transition and params to SidebarDropdownWrapper.
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid, ArrowRightToBracketOutline, EditSolid, ShoppingBagSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { fade } from "svelte/transition";
import { sineIn } from "svelte/easing";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
let params = {
duration: 700,
easing: sineIn
};
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(false);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
position="absolute"
classes={{ nonactive: "p-2", active: "p-2" }}
class="z-50 h-full"
>
<SidebarGroup>
<SidebarItem label="Dashboard">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarDropdownWrapper label="E-commerce" btnClass="p-2" transition={fade} {params}>
{#snippet icon()}
<ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
<SidebarItem label="Sidebar" href="/components/sidebar" />
<SidebarItem label="Billing" />
<SidebarItem label="Invoice" />
</SidebarDropdownWrapper>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Users">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Sign In">
{#snippet icon()}
<ArrowRightToBracketOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Sign Up">
{#snippet icon()}
<EditSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="h-96 overflow-auto px-4 md:ml-64">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
</div>Static positioning #
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
import PlusPlaceholder from "$utils/PlusPlaceholder.svelte";
import { page } from "$app/state";
let activeUrl = $state(page.url.pathname);
const spanClass = "flex-1 ms-3 whitespace-nowrap";
const demoSidebarUi = uiHelpers();
let isDemoOpen = $state(true);
const closeDemoSidebar = demoSidebarUi.close;
$effect(() => {
isDemoOpen = demoSidebarUi.isOpen;
activeUrl = page.url.pathname;
});
</script>
<div class="h-96 overflow-auto px-4">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
<div class="flex w-full flex-row pb-4">
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<Sidebar
{activeUrl}
backdrop={false}
isOpen={isDemoOpen}
closeSidebar={closeDemoSidebar}
params={{ x: -50, duration: 50 }}
class="z-50"
position="static"
classes={{ nonactive: "p-2", active: "p-2" }}
>
<SidebarGroup>
<SidebarItem label="Dashboard" href="/">
{#snippet icon()}
<ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarItem label="Kanban" {spanClass} href="/">
{#snippet icon()}
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Inbox" {spanClass} href="/">
{#snippet icon()}
<MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet subtext()}
<span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
{/snippet}
</SidebarItem>
<SidebarItem label="Sidebar" href="/components/sidebar">
{#snippet icon()}
<UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
</SidebarGroup>
</Sidebar>
<div class="grow pt-2 pl-4">
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>
<PlusPlaceholder />
<PlusPlaceholder colnum={3} rownum={1} />
<PlusPlaceholder />
<PlusPlaceholder colnum={2} rownum={2} />
</div>
</div>onclick handler on SidebarDropdownWrapper #
- Svelte
<script lang="ts">
import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownItem, SidebarDropdownWrapper } from "flowbite-svelte";
import { ChartPieSolid, CartSolid, ChevronDoubleUpOutline, ChevronDoubleDownOutline } from "flowbite-svelte-icons";
const handleClick = () => {
alert("Hello from SidebarDropdownWrapper.");
};
</script>
<Sidebar position="static">
<SidebarWrapper>
<SidebarGroup>
<SidebarItem label="Dashboard">
{#snippet icon()}
<ChartPieSolid class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
</SidebarItem>
<SidebarDropdownWrapper label="E-commerce" onclick={handleClick}>
{#snippet icon()}
<CartSolid class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
{/snippet}
{#snippet arrowup()}
<ChevronDoubleUpOutline class="h-6 w-6" />
{/snippet}
{#snippet arrowdown()}
<ChevronDoubleDownOutline class="h-6 w-6" />
{/snippet}
<SidebarDropdownItem label="Products" />
<SidebarDropdownItem label="Billing" />
<SidebarDropdownItem label="Invoice" />
</SidebarDropdownWrapper>
</SidebarGroup>
</SidebarWrapper>
</Sidebar>Component data #
The component has the following props, type, and default values. See types page for type information.
Loading...
References #
GitHub Links #
- Sidebar component on GitHub
- SidebarBrand component on GitHub
- SidebarButton component on GitHub
- SidebarCta component on GitHub
- SidebarDropdownWrapper component on GitHub
- SidebarGroup component on GitHub
- SidebarItem component on GitHub
- SidebarWrapper component on GitHub