Sidebar

A sidebar is a component that helps you organize your content and navigation.

Basic

I can't display a live example here. Click on the image to view it in full screen, or here.

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Aside's decked out with several components to make it bangin'.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Sheet

Slide out a panel for extra info, like pulling a drawer to find more tools, perfect for additional context without leaving the page..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

And next, you can copy the code below and paste it into your dopest component folder.

If we're only considering the sidebar, the layout might not seem like a concern. However, to ensure everything works smoothly, especially in terms of responsiveness, we need to use the Layout component. Within the Layout component, we can call Aside.Layout and pass the navbar and aside props. The navbar prop represents the navigation bar displayed in mobile view, while the aside prop represents the sidebar displayed in both desktop and mobile views.

If you're using Next.js, you don't have to do anything. But if you're using a different framework, you can use the Layout component to wrap your entire application. This is how it looks like:

<AppLayout>
  You can put your entire application here.
</AppLayout>

Inertia.js

Inertia.js comes with a built-in persistent layout, so you can do it like this:

Home.layout = (page: React.ReactNode) => <AppLayout children={page} />

Badge

Sometimes you need to display a total number of items in a list. You can use the badge prop within the Aside.Item component like this:

<Aside.Item href="#" badge="5.67K">
  Newsletter
</Aside.Item>
<Aside.Item href="#" badge={35}>
  Messages
</Aside.Item>

Icon

The icon is provided as a prop to maintain simplicity, especially since ListBoxItem requires a textValue. By default, if the child element is a string, it will automatically be used as the textValue:

const textValue = typeof children === "string" ? children : undefined;

This is why the icon is passed as a prop, allowing you to include it like this:

<Aside.Item href="#" icon={IconEnvelope}>
  Newsletter
</Aside.Item>

If you prefer to pass the icon as a child element, remember to manually provide the textValue prop:

<Aside.Item href="#" textValue="Newsletter">
  <IconEnvelope />
  Newsletter
</Aside.Item>

Failing to provide textValue when using non-plain text children will result in the following warning:

A `textValue` prop is required for <ListBoxItem> elements with non-plain text children in order to support accessibility features such as type to select.

Blurred

The isBlurred prop can be used to blur the background of the Aside.Content component. To do that, simply add the prop to the Aside.Layout component:

<Aside.Layout
  isBlurred

Is Stack

By default, the Layout will be stacked on mobile. However, if you don't want that, you can use the isStack prop to change that:

<Aside.Layout
  isStack={false}

Side

The side prop can be used to change the side of the Aside.Content component. By default, it's set to left, but you can change it to right by adding the prop:

<Aside.Layout
  side="right"

Current Active Item

The isCurrent prop can be used to highlight the current active item. To do that, simply add the prop to the Aside.Item component:

<Aside.Item isCurrent/>

Carefully

Under the hood, Aside.Content and Aside.Item utilizes ListBox, so be aware of any caveats associated with it.

Tag Field Container