React Sidenav - Flowbite

Get started with the side nav component to show a list of menu items, dropdowns, actions, and user profile actions for your application and dashboard.


Default side navigation

Use the default sidebar navigation to show a list of menu items with dropdown items and a list of options links at the bottom of the component.

View on GitHub

Sidenav with alert info

This example can be used to show side navigation with menu items and a dismissable informational alert.

View on GitHub

Sidenav with user profile

Use this example to show details about the currently logged-in user and menu items for website navigation.

View on GitHub

Sidenav with user switch

This example can be used to switch between multiple authenticated users and also allow adding new navigation menu items using the CTA button.

View on GitHub

Sidenav with notifications

This example can be used to show dismissable notifications at the bottom of the sidebar alongside the default navigation menu items.

View on GitHub

Sidenav with projects and team switch

Use this example of a sidenav to choose between multiple teams, a default navigation menu, and the ability to add and choose between projects.

View on GitHub

Sidenav with search

Use this example to show a search bar and a CTA button inside the side navigation alongside the default menu items.

View on GitHub

Sidenav with user contacts

This example can be used to show a list of user contacts for messaging alongside the navigation menu items in the sidebar.

View on GitHub

Double sidenav

This example can be used to show a double-side nav with a collapsable sidebar with menu items and dropdowns.

View on GitHub

Secondary sidenav with user contacts

This example can be used as a secondary sidenav on the right side of the page by showing a list of active and inactive user contacts and group messaging.

View on GitHub

Crypto sidenav

Use this example to show a list of cryptocurrencies in a list in the sidenav showing the coin logo, name, ticker, price, and market movement.

View on GitHub

Double sidenav with tasks

This example can be used to show two sidenavs with menu items and a list of tasks with dropdown menus, CTAs, and a dismissable alert.

View on GitHub