Sidebar

We use a modern sidebar navigation for our dashboards. The Sidebar components included in the UI library are fairly high-level, allowing you to add additional styling and features where needed.

The are meant to be used in conjunction with the Page components.

Layout example

Example layout:

<Sidebar.Layout>
	<Sidebar>
		<ul>
			<Sidebar.Group title="Group 1">
				<Sidebar.Item active>
					<a href="#">Item 1</a>
				</Sidebar.Item>
				<Sidebar.Item>
					<a href="#">Item 2</a>
				</Sidebar.Item>
			</Sidebar.Group>
			<Sidebar.Group title="Group 2">
				<Sidebar.Item>
					<a href="#">Item 3</a>
				</Sidebar.Item>
				<Sidebar.Item>
					<a href="#">Item 4</a>
				</Sidebar.Item>
			</Sidebar.Group>
		</ul>
		<Sidebar.Footer>
			<Logo height="24px" />
		</Sidebar.Footer>
	</Sidebar>
 
	<Page.Main>
		<p>Hello, world!</p>
	</Page.Main>
</Sidebar.Layout>

Components

`Sidebar`

The Sidebar component is the main container for the sidebar navigation. It should be placed inside a Sidebar.Layout component, alongside a Page.Main component for the page body.

Props:

children - The content of the sidebar.
className - Optional additional CSS classes to apply (optional).

`Sidebar.Item`

The Sidebar.Item component is a single item in the sidebar navigation. This renders as a <li> element.

This should contain a <a> or <button> element to be clickable, and works well with SVG icons, which will be left-aligned.

Props:

children - The content of the item.
active - Whether the item is currently active (optional).
className - Optional additional CSS classes to apply (optional).

`Sidebar.Group`

The Sidebar.Group component is an optional container for a group of sidebar items. Not all sidebar items need to be in a group, but this can be helpful for organizing.

Props:

children - The content of the group.
title - The title of the group (optional).
className - Optional additional CSS classes to apply (optional).

`Sidebar.Footer`

The Sidebar.Footer component is an optional container for a footer at the bottom of the sidebar.

Props:

children - The content of the footer.
className - Optional additional CSS classes to apply (optional).

`Sidebar.Layout`

The Sidebar.Layout component is a container for the sidebar navigation and page body. It should contain a Sidebar component and a Page.Main component.

Props:

children - The content of the layout.
className - Optional additional CSS classes to apply (optional).

Pill Switch