Sidebar

The Sidebar component provides a responsive navigation panel that transforms into a drawer on smaller screens.

Basic Sidebar

Sidebar

Main Content Area

Implementation

<Layout wlSidebar={200}>
  <LayoutBody>
    <Sidebar>
      <SidebarBody>
        <Menu vertical>
          <MenuItem>
            <Icons icon="solar:home-bold" class="mr-2" />
            <Text>Dashboard</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:user-bold" class="mr-2" />
            <Text>Profile</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:settings-bold" class="mr-2" />
            <Text>Settings</Text>
          </MenuItem>
        </Menu>
      </SidebarBody>
    </Sidebar>
    <LayoutMain>
      <!-- Main content -->
    </LayoutMain>
  </LayoutBody>
</Layout>

Responsive Sidebar

Sidebar
Navigation

Main Content Area (with sidebar trigger)

Resize browser to see responsive behavior

Implementation

<Layout wlSidebar={200}>
  <LayoutBody>
    <Sidebar breakpoint="md">
      <SidebarHeader>
        <Flex class="justify-between items-center p-4">
          <Text variant="h6">App Name</Text>
        </Flex>
      </SidebarHeader>
      <SidebarBody>
        <Menu vertical>
          <MenuTitle>Navigation</MenuTitle>
          <MenuItem>
            <Icons icon="solar:home-bold" class="mr-2" />
            <Text>Dashboard</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:user-bold" class="mr-2" />
            <Text>Profile</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:settings-bold" class="mr-2" />
            <Text>Settings</Text>
          </MenuItem>
        </Menu>
      </SidebarBody>
    </Sidebar>
    <LayoutMain>
      <SidebarTrigger placement="left">
        <Icons icon="solar:hamburger-menu-bold" />
      </SidebarTrigger>
      <!-- Main content -->
    </LayoutMain>
  </LayoutBody>
</Layout>

Sidebar with Header and Footer

App Logo

User Profile

Main Content Area

Implementation

<Layout wlSidebar={200}>
  <LayoutBody>
    <Sidebar>
      <SidebarHeader>
        <Flex class="p-4 border-b">
          <Text variant="h6">App Logo</Text>
        </Flex>
      </SidebarHeader>
      <SidebarBody>
        <Menu vertical>
          <MenuItem>
            <Icons icon="solar:home-bold" class="mr-2" />
            <Text>Dashboard</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:user-bold" class="mr-2" />
            <Text>Profile</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:chart-bold" class="mr-2" />
            <Text>Analytics</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:settings-bold" class="mr-2" />
            <Text>Settings</Text>
          </MenuItem>
          <MenuItem>
            <Icons icon="solar:chat-round-bold" class="mr-2" />
            <Text>Messages</Text>
          </MenuItem>
        </Menu>
      </SidebarBody>
      <SidebarFooter>
        <Flex class="p-4 border-t items-center">
          <Icons icon="solar:user-circle-bold" class="mr-2" />
          <Text>User Profile</Text>
        </Flex>
      </SidebarFooter>
    </Sidebar>
    <LayoutMain>
      <!-- Main content -->
    </LayoutMain>
  </LayoutBody>
</Layout>

Sidebar Props and Configuration

Prop
Description
Example
class Additional CSS classes class="bg-gray-100"
placement Position of the sidebar placement="left" or placement="right"
breakpoint Breakpoint at which sidebar converts to drawer breakpoint="md"
hideCloseButton Whether to hide the close button in drawer mode hideCloseButton=true

Responsive Behavior

The Sidebar component automatically transforms into a drawer on smaller screens based on the specified breakpoint. Available breakpoints are: "sm", "md", "lg", "xl", "2xl".

When in drawer mode, the sidebar can be toggled using the SidebarTrigger component, which should be placed in your layout.