Sidebar - Empreint

A vertical navigation panel. Use SidebarHeader, SidebarGroup, SidebarLink, and SidebarItem to compose your menu.

import { Sidebar, SidebarGroup, SidebarHeader, SidebarItem, SidebarLink } from "@empreint/ui";

<Sidebar>
	<SidebarHeader>My App</SidebarHeader>
	<SidebarGroup>
		<SidebarLink isActive>
			<a href="/">Home</a>
		</SidebarLink>
		<SidebarLink>
			<a href="/settings">Settings</a>
		</SidebarLink>
		<SidebarItem onClick={() => logout()}>Logout</SidebarItem>
	</SidebarGroup>
</Sidebar>

Props

Sidebar and its sub-components accept children and className. SidebarItem also accepts onClick. SidebarLink accepts an optional isActive prop.

CSS Variables

Prop

Type