Sidebar

A sidebar holds the navigation of an app in a panel at the left or the right edge of the screen. Users collapse and expand it with the trigger, the rail or the keyboard shortcut Ctrl+B or Command+B, and the page content takes the width that the sidebar frees. In a viewport narrower than 768 pixels, the sidebar opens as a sheet over the page instead. SidebarProvider is at least as tall as the viewport, and Sidebar is fixed to an edge of the viewport, so an app places both at the root of its layout.

UsageCopy Anchor Link

import { Card } from "@biem/ui/components/ui/card";
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarProvider,
	SidebarSeparator,
} from "@biem/ui/components/ui/sidebar";
import {
	IconBook,
	IconBuildingStore,
	IconChartBar,
	IconHelp,
	IconMessage,
	IconPackage,
	IconReceipt,
	IconUsers,
} from "@tabler/icons-react";

export function SidebarDefault() {
	return (
		<div className="w-full max-w-sm">
			<Card className="overflow-hidden py-0">
				<SidebarProvider className="min-h-0">
					<Sidebar collapsible="none" className="w-full bg-transparent">
						<SidebarContent className="gap-0">
							<SidebarGroup className="pb-1">
								<SidebarGroupLabel>Retail</SidebarGroupLabel>
								<SidebarGroupContent>
									<SidebarMenu>
										<SidebarMenuItem><SidebarMenuButton isActive><IconChartBar stroke={1.5}/>Overview</SidebarMenuButton></SidebarMenuItem>
										<SidebarMenuItem><SidebarMenuButton><IconReceipt stroke={1.5}/>Sales</SidebarMenuButton></SidebarMenuItem>
										<SidebarMenuItem><SidebarMenuButton disabled><IconBuildingStore stroke={1.5}/>Stores</SidebarMenuButton></SidebarMenuItem>
										<SidebarMenuItem><SidebarMenuButton><IconPackage stroke={1.5}/>Products</SidebarMenuButton></SidebarMenuItem>
										<SidebarMenuItem><SidebarMenuButton><IconUsers stroke={1.5}/>Customers</SidebarMenuButton></SidebarMenuItem>
									</SidebarMenu>
								</SidebarGroupContent>
							</SidebarGroup>
							<SidebarSeparator className="w-auto!"/>
							<SidebarGroup className="pt-1">
								<SidebarGroupLabel>Support</SidebarGroupLabel>
								<SidebarGroupContent>
									<SidebarMenu>
										<SidebarMenuItem><SidebarMenuButton><IconHelp stroke={1.5}/>Help center</SidebarMenuButton></SidebarMenuItem>
										<SidebarMenuItem><SidebarMenuButton><IconMessage stroke={1.5}/>Contact us</SidebarMenuButton></SidebarMenuItem>
										<SidebarMenuItem><SidebarMenuButton><IconBook stroke={1.5}/>Documentation</SidebarMenuButton></SidebarMenuItem>
									</SidebarMenu>
								</SidebarGroupContent>
							</SidebarGroup>
						</SidebarContent>
					</Sidebar>
				</SidebarProvider>
			</Card>
		</div>
	);
}

ExamplesCopy Anchor Link

With Menu BadgeCopy Anchor Link

Some areas of an app collect work that waits for users, such as orders to pick or returns to process. Through SidebarMenuBadge, a menu item shows how much is waiting, so users see where to begin before they open an area, and a press on the count works like a press on the entry itself.

With SubmenuCopy Anchor Link

Larger areas often break down into views of their own, such as an assortment by category. A SidebarMenuSub lists these views as a second level of the menu item they belong to, so the first level stays short and users reach each view in one step. Every entry is a SidebarMenuSubButton, a real link that users can open in a new tab, and isActive marks the view they are on.

API ReferenceCopy Anchor Link

SidebarProviderCopy Anchor Link

SidebarCopy Anchor Link

SidebarTriggerCopy Anchor Link

SidebarRailCopy Anchor Link

SidebarRail adds a narrow strip along the edge of the sidebar that faces the page content. Users press it to collapse or expand the sidebar. It renders a button that the Tab key skips, and it has no props of its own.

SidebarInsetCopy Anchor Link

SidebarInset holds the page content beside the sidebar and takes the width that the sidebar leaves. It renders a main and has no props of its own.

SidebarInputCopy Anchor Link

SidebarInput is an Input for the sidebar, such as a search field in SidebarHeader. It renders an input and has no props of its own.

SidebarHeaderCopy Anchor Link

SidebarHeader holds the content at the top of the sidebar and stays in place while SidebarContent scrolls. It renders a div and has no props of its own.

SidebarFooterCopy Anchor Link

SidebarFooter holds the content at the bottom of the sidebar and stays in place while SidebarContent scrolls. It renders a div and has no props of its own.

SidebarSeparatorCopy Anchor Link

SidebarContentCopy Anchor Link

SidebarContent holds the groups and takes the height between the header and the footer. It scrolls when the groups don't fit. It renders a div and has no props of its own.

SidebarGroupCopy Anchor Link

SidebarGroup holds one section of the sidebar: its label, its action and its content. It renders a div and has no props of its own.

SidebarGroupLabelCopy Anchor Link

SidebarGroupActionCopy Anchor Link

SidebarGroupContentCopy Anchor Link

SidebarGroupContent holds the content of a group, such as a SidebarMenu. It renders a div and has no props of its own.

SidebarMenuCopy Anchor Link

SidebarMenu stacks the items of a menu. It renders a ul and has no props of its own.

SidebarMenuItemCopy Anchor Link

SidebarMenuItem holds one entry of the menu: its button and, with it, an action, a badge or a submenu. It renders an li and has no props of its own.

SidebarMenuButtonCopy Anchor Link

SidebarMenuActionCopy Anchor Link

SidebarMenuBadgeCopy Anchor Link

SidebarMenuBadge shows a short value at the end of a menu item, such as a count. A press on it reaches the button behind it. It renders a div and has no props of its own.

SidebarMenuSkeletonCopy Anchor Link

SidebarMenuSubCopy Anchor Link

SidebarMenuSub holds a second level of entries below a menu button. It indents them and draws a line along their left edge. It renders a ul and has no props of its own.

SidebarMenuSubItemCopy Anchor Link

SidebarMenuSubItem holds one entry of the submenu. It renders an li and has no props of its own.

SidebarMenuSubButtonCopy Anchor Link

useSidebarCopy Anchor Link

useSidebar returns the state of the nearest SidebarProvider and the functions that change it. state is "expanded" or "collapsed", and open holds the same as a boolean. setOpen expands or collapses the sidebar. openMobile and setOpenMobile read and set the sheet of a narrow viewport, and isMobile tells whether the viewport is narrower than 768 pixels. toggleSidebar toggles the sheet in a narrow viewport and the sidebar otherwise. Outside a SidebarProvider, the hook throws an error. It is a hook, so it takes no arguments, renders no element and has no props of its own.