Sidebar

Side navigation, commonly used as the primary navigation in web applications.

Import#

Sidebar: The container component that manages state.
SidebarSection: A sidebar section.
SidebarToggleButton: Button to toggle the sidebar visibility.
SidebarOverlay: Background overlay visible when the sidebar is open on mobile.
NavGroup: A group of navigation items.
NavItem: A navigation item.

import {
  Sidebar,
  SidebarSection,
  SidebarToggleButton,
  SidebarOverlay,
  NavGroup,
  NavItem,
} from '@saas-ui/react'

Usage#

Basic#

import {
  Box,
  Spacer,
  Button,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
} from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarToggleButton,
  SidebarSection,
  NavItem,
  PersonaAvatar,
} from '@saas-ui/react'
import { FiHome, FiUsers } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <Sidebar toggleBreakpoint="sm">
          <SidebarToggleButton />
          <SidebarSection direction="row">
            <Image
              src="https://saas-ui.dev/favicons/favicon-96x96.png"
              boxSize="7"
            />
            <Spacer />
            <Menu>
              <MenuButton
                as={IconButton}
                icon={
                  <PersonaAvatar
                    presence="online"
                    size="xs"
                    src="/showcase-avatar.jpg"
                  />
                }
                variant="ghost"
              />
              <MenuList>
                <MenuItem>Sign out</MenuItem>
              </MenuList>
            </Menu>
          </SidebarSection>
          <SidebarSection aria-label="Main">
            <NavItem icon={<FiHome />} isActive>
              Home
            </NavItem>
            <NavItem icon={<FiUsers />}>Users</NavItem>
            <NavItem icon={<FiSettings />}>Settings</NavItem>
          </SidebarSection>
        </Sidebar>
      }
    />
  )
}

Grouped items#

import {
  Box,
  Spacer,
  Button,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
} from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarToggleButton,
  SidebarSection,
  NavItem,
  NavGroup,
  PersonaAvatar,
} from '@saas-ui/react'
import { FiHome, FiUsers, FiSettings } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <Sidebar toggleBreakpoint="sm">
          <SidebarToggleButton />
          <SidebarSection direction="row">
            <Image
              src="https://saas-ui.dev/favicons/favicon-96x96.png"
              boxSize="7"
            />
            <Spacer />
            <Menu>
              <MenuButton
                as={IconButton}
                icon={
                  <PersonaAvatar
                    presence="online"
                    size="xs"
                    src="/showcase-avatar.jpg"
                  />
                }
                variant="ghost"
              />
              <MenuList>
                <MenuItem>Sign out</MenuItem>
              </MenuList>
            </Menu>
          </SidebarSection>
          <SidebarSection aria-label="Main">
            <NavGroup>
              <NavItem icon={<FiHome />} isActive>
                Home
              </NavItem>
              <NavItem icon={<FiUsers />}>Users</NavItem>
              <NavItem icon={<FiSettings />}>Settings</NavItem>
            </NavGroup>

            <NavGroup title="Teams" isCollapsible>
              <NavItem>Sales</NavItem>
              <NavItem>Support</NavItem>
            </NavGroup>
          </SidebarSection>
        </Sidebar>
      }
    />
  )
}

Scroll#

Make a section in the sidebar scrollable by setting the overflowY prop, use flex=1 to make sure it fills up the entire vertical space.

<SidebarSection flex="1" overflowY="auto"></SidebarSection>

import {
  Box,
  Badge,
  Text,
  Spacer,
  Button,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
} from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarToggleButton,
  SidebarSection,
  NavItem,
  NavGroup,
  PersonaAvatar,
} from '@saas-ui/react'
import { FiHome, FiUsers, FiSettings, FiHelpCircle } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <Sidebar toggleBreakpoint="sm">
          <SidebarToggleButton />
          <SidebarSection direction="row">
            <Image
              src="https://saas-ui.dev/favicons/favicon-96x96.png"
              boxSize="7"
            />
            <Spacer />
            <Menu>
              <MenuButton
                as={IconButton}
                icon={
                  <PersonaAvatar
                    presence="online"
                    size="xs"
                    src="/showcase-avatar.jpg"
                  />
                }
                variant="ghost"
              />
              <MenuList>
                <MenuItem>Sign out</MenuItem>
              </MenuList>
            </Menu>
          </SidebarSection>
          <SidebarSection flex="1" overflowY="auto">
            <NavGroup>
              <NavItem icon={<FiHome />} isActive>
                Home
              </NavItem>
              <NavItem icon={<FiUsers />}>Users</NavItem>
              <NavItem icon={<FiSettings />}>Settings</NavItem>
            </NavGroup>

            <NavGroup title="Teams" isCollapsible>
              <NavItem>Sales</NavItem>
              <NavItem>Support</NavItem>
            </NavGroup>

            <NavGroup title="Tags" isCollapsible>
              <NavItem
                icon={<Badge bg="purple.500" boxSize="2" borderRadius="full" />}
              >
                <Text>Lead</Text>
                <Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">
                  83
                </Badge>
              </NavItem>
              <NavItem
                icon={<Badge bg="cyan.500" boxSize="2" borderRadius="full" />}
              >
                <Text>Customer</Text>
                <Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">
                  210
                </Badge>
              </NavItem>
            </NavGroup>
          </SidebarSection>
          <SidebarSection>
            <NavItem icon={<FiHelpCircle />}>Documentation</NavItem>
          </SidebarSection>
        </Sidebar>
      }
    />
  )
}

Compact variant#

The compact variant can be used as a collapsed state on smaller screens, or as the primary navigation in a double sidebar layout, see below. NavItem labels will be rendered as tooltips.

Use the tooltipProps prop to customize the tooltip.

import { Box, Image } from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  SidebarToggleButton,
  NavItem,
} from '@saas-ui/react'
import { FiHome, FiUsers, FiSettings } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <Sidebar variant="compact" width="64px" toggleBreakpoint="sm">
          <SidebarToggleButton />
          <SidebarSection alignItems="center">
            <Image
              src="https://saas-ui.dev/favicons/favicon-96x96.png"
              boxSize="7"
            />
          </SidebarSection>
          <SidebarSection>
            <NavItem icon={<FiHome size="1.2em" />} size="md">
              Home
            </NavItem>
            <NavItem icon={<FiUsers size="1.2em" />} size="md">
              Users
            </NavItem>
            <NavItem icon={<FiSettings size="1.2em" />} size="md">
              Settings
            </NavItem>
          </SidebarSection>
        </Sidebar>
      }
    />
  )
}

Toggle variant#

import { Box, Spacer, IconButton, Image, useDisclosure } from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  SidebarOverlay,
  NavItem,
  NavGroup,
} from '@saas-ui/react'
import {
  FiHome,
  FiUsers,
  FiSettings,
  FiStar,
  FiChevronsLeft,
  FiChevronsRight,
} from 'react-icons/fi'

export default function ToggleVariant() {
  const { isOpen, onToggle } = useDisclosure({
    defaultIsOpen: true,
  })

  return (
    <AppShell
      sidebar={
        <Sidebar
          toggleBreakpoint={false}
          variant={isOpen ? 'default' : 'compact'}
          transition="width"
          transitionDuration="normal"
          width={isOpen ? '280px' : '14'}
          minWidth="auto"
        >
          <SidebarSection direction={isOpen ? 'row' : 'column'}>
            <Image
              src="https://saas-ui.dev/favicons/favicon-96x96.png"
              boxSize="6"
              mb="1"
              display={isOpen ? 'block' : 'none'}
            />
            <Spacer />
            <IconButton
              onClick={onToggle}
              variant="ghost"
              size="sm"
              icon={isOpen ? <FiChevronsLeft /> : <FiChevronsRight />}
              aria-label="Toggle Sidebar"
            />
          </SidebarSection>

          <SidebarSection flex="1" overflowY="auto" overflowX="hidden">
            <NavGroup>
              <NavItem icon={<FiHome />} isActive>
                All users
              </NavItem>
              <NavItem icon={<FiStar />}>Favourite users</NavItem>
            </NavGroup>
          </SidebarSection>
          <SidebarOverlay zIndex="1" />
        </Sidebar>
      }
    />
  )
}

You can stack multiple sidebars together to create a double sidebar layout.

import { Box, HStack, Image, Heading, Text, Badge } from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  NavItem,
  NavGroup,
  PersonaAvatar,
} from '@saas-ui/react'
import { FiHome, FiUsers, FiSettings, FiHelpCircle } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <HStack spacing="0" alignItems="stretch">
          <Sidebar
            variant="compact"
            bg="purple.500"
            borderWidth="0"
            spacing="3"
            _dark={{
              bg: 'purple.500',
            }}
          >
            <SidebarSection>
              <Image
                src="https://saas-ui.dev/favicons/favicon-96x96.png"
                boxSize="7"
              />
            </SidebarSection>
            <SidebarSection>
              <NavItem icon={<FiHome size="1.2em" color="white" />}>
                Home
              </NavItem>
              <NavItem icon={<FiUsers size="1.2em" color="white" />} isActive>
                Users
              </NavItem>
              <NavItem icon={<FiSettings size="1.2em" color="white" />}>
                Settings
              </NavItem>
            </SidebarSection>
          </Sidebar>
          <Sidebar toggleBreakpoint="sm">
            <SidebarSection direction="row" mt="2" px="4">
              <Heading size="sm" fontWeight="semibold">
                Users
              </Heading>
            </SidebarSection>
            <SidebarSection flex="1" overflowY="auto">
              <NavGroup>
                <NavItem icon={<FiUsers />} isActive>
                  Overview
                </NavItem>
              </NavGroup>

              <NavGroup title="Teams" isCollapsible>
                <NavItem>Sales</NavItem>
                <NavItem>Support</NavItem>
              </NavGroup>

              <NavGroup title="Tags" isCollapsible>
                <NavItem
                  icon={
                    <Badge bg="purple.500" boxSize="2" borderRadius="full" />
                  }
                >
                  <Text>Lead</Text>
                  <Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">
                    83
                  </Badge>
                </NavItem>
                <NavItem
                  icon={<Badge bg="cyan.500" boxSize="2" borderRadius="full" />}
                >
                  <Text>Customer</Text>
                  <Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">
                    210
                  </Badge>
                </NavItem>
              </NavGroup>
            </SidebarSection>
            <SidebarSection>
              <NavItem icon={<FiHelpCircle />}>Documentation</NavItem>
            </SidebarSection>
          </Sidebar>
        </HStack>
      }
    />
  )
}

Breakpoints#

The sidebar will automatically close on small screens. You can change this behavior by customizing the toggleBreakpoint. Breakpoints are disabled for the compact variant.

The default breakpoint is lg, to disable the breakpoint set the toggleBreakpoint to false.

<Sidebar toggleBreakpoint="lg" />

Custom toggleBreakpoint value:

import {
  Box,
  Spacer,
  Button,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Image,
} from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  NavItem,
  NavGroup,
  PersonaAvatar,
} from '@saas-ui/react'
import { FiHome, FiUsers, FiSettings } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <Sidebar toggleBreakpoint="xl">
          <SidebarToggleButton />
          <SidebarSection direction="row">
            <Image
              src="https://saas-ui.dev/favicons/favicon-96x96.png"
              boxSize="7"
            />
            <Spacer />
            <Menu>
              <MenuButton
                as={IconButton}
                icon={
                  <PersonaAvatar
                    presence="online"
                    size="xs"
                    src="/showcase-avatar.jpg"
                  />
                }
                variant="ghost"
              />
              <MenuList>
                <MenuItem>Sign out</MenuItem>
              </MenuList>
            </Menu>
          </SidebarSection>
          <SidebarSection aria-label="Main">
            <NavItem icon={<FiHome />} isActive>
              Home
            </NavItem>
            <NavItem icon={<FiUsers />}>Users</NavItem>
            <NavItem icon={<FiSettings />}>Settings</NavItem>
          </SidebarSection>
          <SidebarOverlay />
        </Sidebar>
      }
    />
  )
}

Was this helpful?