Chakra UI Sidebar - Horizon UI

It has an option to set the brand text (logoText), an option to set the logo image (logo), an option to choose between opaque and transparent modes and an option to set the routes / links to be displayed in it (routes).

For more info about the links, please read the routing system section.

Inside the same Sidebar.js file, there is a SidebarResponsive() component, which is a button that opens a drawer which only appears on smaller viewports. It has the same props as the normal Sidebar, besides the opacity mode.

Example of code#

This is the actual code for the Sidebar in our demo app.

import Sidebar from "components/Sidebar/Sidebar.js"
import appRoutes from "routes/app.js"
import logo from "assets/img/reactlogo.png"

<Sidebar routes={appRoutes} logoText={"DASHBOARD"} variant="opaque" {...rest} />

Props#

Please check out the official Chakra UI documentation.