Skip to content
fulldev/ui logo fulldev/ui
X 468

Sidebar

Installation

Section titled “Installation”

To install the sidebar component, run the following command:

Terminal window
npx shadcn@latest add @fulldev/sidebar

Usage

Section titled “Usage”
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar"
<SidebarMenu>
  <SidebarMenuItem>
    <SidebarMenuButton href="/">Home</SidebarMenuButton>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton href="/about">About</SidebarMenuButton>
  </SidebarMenuItem>
</SidebarMenu>

Examples

Section titled “Examples”

Basic Menu

Section titled “Basic Menu”

A simple vertical navigation menu with menu items.

---
import { Icon } from "@/components/ui/icon"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
---


<SidebarMenu class="w-64 space-y-1">
  <SidebarMenuItem>
    <SidebarMenuButton href="/">
      <Icon name="home" />
      <span>Home</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton href="/dashboard">
      <Icon name="layout-dashboard" />
      <span>Dashboard</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton href="/settings">
      <Icon name="settings" />
      <span>Settings</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
</SidebarMenu>

Active State

Section titled “Active State”

Use the active prop to highlight the current page.

---
import { Icon } from "@/components/ui/icon"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
---


<SidebarMenu class="w-64 space-y-1">
  <SidebarMenuItem>
    <SidebarMenuButton href="/">
      <Icon name="home" />
      <span>Home</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton href="/dashboard" active>
      <Icon name="layout-dashboard" />
      <span>Dashboard</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton href="/settings">
      <Icon name="settings" />
      <span>Settings</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
</SidebarMenu>

With Submenu

Section titled “With Submenu”

Create nested navigation with SidebarMenuSub.

---
import { Icon } from "@/components/ui/icon"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar"
---


<SidebarMenu class="w-64 space-y-1">
  <SidebarMenuItem>
    <SidebarMenuButton href="/">
      <Icon name="home" />
      <span>Home</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton>
      <Icon name="folder" />
      <span>Projects</span>
    </SidebarMenuButton>
    <SidebarMenuSub>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton href="/projects/web">
          Web App
        </SidebarMenuSubButton>
      </SidebarMenuSubItem>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton href="/projects/mobile">
          Mobile App
        </SidebarMenuSubButton>
      </SidebarMenuSubItem>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton href="/projects/api"> API </SidebarMenuSubButton>
      </SidebarMenuSubItem>
    </SidebarMenuSub>
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuButton href="/settings">
      <Icon name="settings" />
      <span>Settings</span>
    </SidebarMenuButton>
  </SidebarMenuItem>
</SidebarMenu>

Button Variants

Section titled “Button Variants”

The SidebarMenuButton supports different variants and sizes.

 
---
import { Icon } from "@/components/ui/icon"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
---


<div class="flex flex-col gap-4">
  <SidebarMenu class="w-64">
    <SidebarMenuItem>
      <SidebarMenuButton variant="default">
        <Icon name="home" />
        <span>Default</span>
      </SidebarMenuButton>
    </SidebarMenuItem>
    <SidebarMenuItem>
      <SidebarMenuButton variant="outline">
        <Icon name="folder" />
        <span>Outline</span>
      </SidebarMenuButton>
    </SidebarMenuItem>
  </SidebarMenu>
</div>