Skip to content

Sidebars for React and Tailwind

A sidebar holds the whole shape of your app, so it has to keep working as features pile up. Look for clear active states, room for nested items and a collapsed mode that still makes sense. Check what happens on a phone too. Install one with a single command, then add your own routes and icons. Keep the most used pages near the top.

About sidebars

Sidebars are the main navigation of an app, running down one side of the screen. They hold sections of links with icons, a workspace or account switcher, search and a user menu, and many collapse to a rail of icons or slide away entirely to make room for content.

Keep the main sections few and labelled plainly, show where people are, and remember whether the sidebar was collapsed. On phones turn it into a drawer opened from a menu button, and make sure collapsed icons have tooltips and accessible names.

Frequently asked questions

Keep the collapsed state in context or a cookie, animate the width between full and an icon rail, and hide labels when collapsed while keeping them as tooltips and accessible names.

Turn it into a drawer that slides in from the side when a menu button is tapped, covers the content with a backdrop and closes when a link is chosen.

Save the choice in a cookie so the server renders the right width on first paint, or in local storage if you only render on the client.

The main sections of the app, a switcher if people belong to several workspaces, search or a command shortcut, and the account menu at the bottom.

Compare each link to the current route, give the match a distinct background and set aria-current to page. Highlight the parent group when a child page is open.

One level of grouping helps, with collapsible groups for larger apps. Deeper nesting is hard to scan; consider a second panel or a page level menu instead.

Left for main navigation in left to right languages, since that's where people expect it. Right side panels usually hold details or tools for the current page.

Explore more