# sidebar-15

> sidebar-15

A shadcn/ui block from the [@intentui](https://intentui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/intentui/sidebar-15).

- Page, with a live preview: https://shadcn.exchange/r/intentui/sidebar-15
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/intentui/sidebar-15-light-eae004b0426a0dab.png
- Registry item: https://intentui.com/r/sidebar-15
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://intentui.com/r/sidebar-15
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://intentui.com/r/avatar`, `https://intentui.com/r/heading`, `https://intentui.com/r/table`, `https://intentui.com/r/breadcrumbs`, `https://intentui.com/r/menu`, `https://intentui.com/r/sidebar`, `https://intentui.com/r/link`

## Files

### `registry/blocks/sidebar-15/page.tsx`

```tsx
"use client"

import { Avatar } from "@/components/ui/avatar"
import { Heading } from "@/components/ui/heading"
import {
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

export default function Page() {
  return (
    <>
      <Heading>Users</Heading>
      <Table aria-label="Users" bleed className="[--gutter:var(--layout-padding)]">
        <TableHeader>
          <TableColumn>ID</TableColumn>
          <TableColumn isRowHeader>Name</TableColumn>
          <TableColumn>Email</TableColumn>
          <TableColumn>Username</TableColumn>
          <TableColumn>Phone</TableColumn>
          <TableColumn>Address</TableColumn>
          <TableColumn>City</TableColumn>
          <TableColumn>State</TableColumn>
          <TableColumn>Country</TableColumn>
          <TableColumn>Postal Code</TableColumn>
          <TableColumn>Avatar</TableColumn>
          <TableColumn>Status</TableColumn>
          <TableColumn>Role</TableColumn>
          <TableColumn>Last Login</TableColumn>
          <TableColumn>Created At</TableColumn>
          <TableColumn>Updated At</TableColumn>
        </TableHeader>
        <TableBody items={users}>
          {(item) => (
            <TableRow id={item.id}>
              <TableCell>{item.id}</TableCell>
              <TableCell>{item.name}</TableCell>
              <TableCell>{item.email}</TableCell>
              <TableCell>{item.username}</TableCell>
              <TableCell>{item.phone}</TableCell>
              <TableCell>{item.address}</TableCell>
              <TableCell>{item.city}</TableCell>
              <TableCell>{item.state}</TableCell>
              <TableCell>{item.country}</TableCell>
              <TableCell>{item.postalCode}</TableCell>
              <TableCell>
                <Avatar size="xs" src={item.avatar} alt="Avatar" />
              </TableCell>
              <TableCell>{item.status}</TableCell>
              <TableCell>{item.role}</TableCell>
              <TableCell>{new Date(item.lastLogin).toLocaleString()}</TableCell>
              <TableCell>{new Date(item.createdAt).toLocaleString()}</TableCell>
              <TableCell>{new Date(item.updatedAt).toLocaleString()}</TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </>
  )
}

const users = [
  {
    id: "1",
    name: "Michael Carter",
    email: "michael.carter@example.com",
    username: "mcarter",
    phone: "+1-202-555-0173",
    address: "742 Evergreen Terrace, Springfield",
    city: "Springfield",
    state: "Illinois",
    country: "USA",
    postalCode: "62704",
    avatar: "https://i.pravatar.cc/150?u=1",
    status: "active",
    role: "admin",
    lastLogin: "2025-05-10T13:42:00Z",
    createdAt: "2023-01-10T10:15:00Z",
    updatedAt: "2025-04-30T09:00:00Z",
  },
  {
    id: "2",
    name: "Ava Thompson",
    email: "ava.thompson@example.com",
    username: "avt",
    phone: "+44-7911-123456",
    address: "19 Church Street, London",
    city: "London",
    state: "England",
    country: "UK",
    postalCode: "SW1A 1AA",
    avatar: "https://i.pravatar.cc/150?u=2",
    status: "pending",
    role: "editor",
    lastLogin: "2025-05-08T16:00:00Z",
    createdAt: "2022-12-05T09:00:00Z",
    updatedAt: "2025-04-29T13:00:00Z",
  },
  {
    id: "3",
    name: "Liam Nguyen",
    email: "liam.nguyen@example.com",
    username: "liamng",
    phone: "+61-401-234-567",
    address: "22 Collins Street, Melbourne",
    city: "Melbourne",
    state: "Victoria",
    country: "Australia",
    postalCode: "3000",
    avatar: "https://i.pravatar.cc/150?u=3",
    status: "inactive",
    role: "viewer",
    lastLogin: "2025-04-20T14:30:00Z",
    createdAt: "2021-06-15T11:45:00Z",
    updatedAt: "2025-04-01T08:10:00Z",
  },
  {
    id: "4",
    name: "Sophia Martinez",
    email: "sophia.martinez@example.com",
    username: "smartinez",
    phone: "+1-305-555-0199",
    address: "301 Ocean Drive, Miami",
    city: "Miami",
    state: "Florida",
    country: "USA",
    postalCode: "33139",
    avatar: "https://i.pravatar.cc/150?u=4",
    status: "active",
    role: "manager",
    lastLogin: "2025-05-10T10:22:00Z",
    createdAt: "2022-04-08T13:30:00Z",
    updatedAt: "2025-05-01T11:50:00Z",
  },
  {
    id: "5",
    name: "Noah Kim",
    email: "noah.kim@example.com",
    username: "noahk",
    phone: "+82-10-1234-5678",
    address: "55 Gangnam-daero, Seoul",
    city: "Seoul",
    state: "Seoul",
    country: "South Korea",
    postalCode: "06000",
    avatar: "https://i.pravatar.cc/150?u=5",
    status: "banned",
    role: "viewer",
    lastLogin: "2025-03-15T17:00:00Z",
    createdAt: "2020-09-21T10:00:00Z",
    updatedAt: "2025-02-18T15:30:00Z",
  },
  {
    id: "6",
    name: "Emma Dubois",
    email: "emma.dubois@example.com",
    username: "emmad",
    phone: "+33-6-12-34-56-78",
    address: "10 Rue de Rivoli, Paris",
    city: "Paris",
    state: "Île-de-France",
    country: "France",
    postalCode: "75001",
    avatar: "https://i.pravatar.cc/150?u=6",
    status: "active",
    role: "admin",
    lastLogin: "2025-05-09T12:00:00Z",
    createdAt: "2023-07-22T08:00:00Z",
    updatedAt: "2025-05-09T12:15:00Z",
  },
  {
    id: "7",
    name: "Ethan Schmidt",
    email: "ethan.schmidt@example.com",
    username: "ethansch",
    phone: "+49-171-1234567",
    address: "5 Alexanderplatz, Berlin",
    city: "Berlin",
    state: "Berlin",
    country: "Germany",
    postalCode: "10178",
    avatar: "https://i.pravatar.cc/150?u=7",
    status: "active",
    role: "developer",
    lastLogin: "2025-05-07T18:30:00Z",
    createdAt: "2023-10-10T09:30:00Z",
    updatedAt: "2025-04-20T08:40:00Z",
  },
  {
    id: "8",
    name: "Isabella Rossi",
    email: "isabella.rossi@example.com",
    username: "bellar",
    phone: "+39-320-1234567",
    address: "Via Roma 12, Milan",
    city: "Milan",
    state: "Lombardy",
    country: "Italy",
    postalCode: "20100",
    avatar: "https://i.pravatar.cc/150?u=8",
    status: "pending",
    role: "editor",
    lastLogin: "2025-04-28T20:15:00Z",
    createdAt: "2022-05-15T14:00:00Z",
    updatedAt: "2025-04-30T07:10:00Z",
  },
  {
    id: "9",
    name: "Lucas Silva",
    email: "lucas.silva@example.com",
    username: "lucsilva",
    phone: "+55-11-91234-5678",
    address: "Av. Paulista, São Paulo",
    city: "São Paulo",
    state: "SP",
    country: "Brazil",
    postalCode: "01311-000",
    avatar: "https://i.pravatar.cc/150?u=9",
    status: "active",
    role: "manager",
    lastLogin: "2025-05-03T08:00:00Z",
    createdAt: "2021-03-05T10:00:00Z",
    updatedAt: "2025-04-10T10:30:00Z",
  },
  {
    id: "10",
    name: "Yuki Tanaka",
    email: "yuki.tanaka@example.com",
    username: "yuki_t",
    phone: "+81-90-1234-5678",
    address: "1 Chome-1-2 Oshiage, Tokyo",
    city: "Tokyo",
    state: "Tokyo",
    country: "Japan",
    postalCode: "131-0045",
    avatar: "https://i.pravatar.cc/150?u=10",
    status: "active",
    role: "designer",
    lastLogin: "2025-05-11T02:45:00Z",
    createdAt: "2024-01-01T00:00:00Z",
    updatedAt: "2025-05-10T22:00:00Z",
  },
]
```

### `registry/blocks/sidebar-15/app-sidebar-nav.tsx`

```tsx
"use client"

import {
  ArrowRightOnRectangleIcon,
  Cog6ToothIcon,
  CommandLineIcon,
  Squares2X2Icon,
} from "@heroicons/react/24/outline"
import { Avatar } from "@/components/ui/avatar"
import { Breadcrumbs, BreadcrumbsItem } from "@/components/ui/breadcrumbs"
import {
  MenuHeader,
  MenuItem,
  MenuLabel,
  MenuSection,
  MenuSeparator,
  Menu,
  MenuTrigger,
} from "@/components/ui/menu"
import { SidebarNav, SidebarTrigger } from "@/components/ui/sidebar"
import { Button } from "react-aria-components/Button"

export default function AppSidebarNav() {
  return (
    <SidebarNav>
      <span className="flex items-center gap-x-4">
        <SidebarTrigger className="-ml-2.5 lg:ml-0" />
        <Breadcrumbs className="hidden md:flex">
          <BreadcrumbsItem href="/pre-blocks/sidebar/sidebar-01">Dashboard</BreadcrumbsItem>
          <BreadcrumbsItem>Newsletter</BreadcrumbsItem>
        </Breadcrumbs>
      </span>
      <UserMenu />
    </SidebarNav>
  )
}

function UserMenu() {
  return (
    <MenuTrigger>
      <Button className="ml-auto md:hidden" aria-label="Open Menu">
        <Avatar isSquare alt="kurt cobain" src="https://intentui.com/images/avatar/cobain.jpg" />
      </Button>
      <Menu popover={{ placement: "bottom end" }} className="min-w-64">
        <MenuSection>
          <MenuHeader separator>
            <span className="block">Kurt Cobain</span>
            <span className="font-normal text-muted-foreground">@cobain</span>
          </MenuHeader>
        </MenuSection>
        <MenuItem href="#dashboard">
          <Squares2X2Icon />
          <MenuLabel>Dashboard</MenuLabel>
        </MenuItem>
        <MenuItem href="#settings">
          <Cog6ToothIcon />
          <MenuLabel>Settings</MenuLabel>
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <CommandLineIcon />
          <MenuLabel>Command Menu</MenuLabel>
        </MenuItem>
        <MenuSeparator />
        <MenuItem href="#contact-s">
          <MenuLabel>Contact Support</MenuLabel>
        </MenuItem>
        <MenuSeparator />
        <MenuItem href="#logout">
          <ArrowRightOnRectangleIcon />
          <MenuLabel>Log out</MenuLabel>
        </MenuItem>
      </Menu>
    </MenuTrigger>
  )
}
```

### `registry/blocks/sidebar-15/app-sidebar.tsx`

```tsx
"use client"

import { Button } from "react-aria-components/Button"

import { EllipsisHorizontalIcon } from "@heroicons/react/16/solid"
import { ChevronUpDownIcon, PlusIcon } from "@heroicons/react/20/solid"
import {
  ArchiveBoxIcon,
  ArrowDownTrayIcon,
  ArrowRightStartOnRectangleIcon,
  ArrowUpTrayIcon,
  BuildingOfficeIcon,
  ChatBubbleLeftRightIcon,
  CheckCircleIcon,
  ClockIcon,
  Cog6ToothIcon,
  CreditCardIcon,
  CubeIcon,
  DocumentTextIcon,
  HashtagIcon,
  HomeIcon,
  LifebuoyIcon,
  ListBulletIcon,
  QuestionMarkCircleIcon,
  ShieldCheckIcon,
  ShoppingBagIcon,
  TicketIcon,
} from "@heroicons/react/24/outline"
import { Avatar } from "@/components/ui/avatar"
import { Link } from "@/components/ui/link"
import {
  MenuHeader,
  MenuItem,
  MenuSection,
  MenuSeparator,
  Menu,
  MenuTrigger,
} from "@/components/ui/menu"
import {
  Sidebar,
  SidebarBadge,
  SidebarContent,
  SidebarDisclosure,
  SidebarDisclosureGroup,
  SidebarDisclosurePanel,
  SidebarDisclosureTrigger,
  SidebarFooter,
  SidebarHeader,
  SidebarItem,
  SidebarLabel,
  SidebarLink,
  SidebarMenuTrigger,
  SidebarRail,
  SidebarSection,
  SidebarSectionGroup,
  useSidebar,
} from "@/components/ui/sidebar"

export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
  const { state } = useSidebar()
  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <Link href="/docs/components/layouts/sidebar" className="flex items-center gap-x-2">
          <Avatar
            isSquare
            size="sm"
            className="outline-hidden"
            src="https://design.intentui.com/logo"
          />
          <SidebarLabel className="font-medium">
            Intent <span className="text-muted-foreground">UI</span>
          </SidebarLabel>
        </Link>
      </SidebarHeader>
      <SidebarContent>
        <SidebarSectionGroup>
          <SidebarSection label="Overview">
            <SidebarItem tooltip="Overview" isCurrent href="#">
              <HomeIcon />
              <SidebarLabel>Overview</SidebarLabel>
            </SidebarItem>

            <SidebarItem tooltip="Orders">
              {({ isCollapsed, isFocused }) => (
                <>
                  <SidebarLink href="#">
                    <ShoppingBagIcon />
                    <SidebarLabel>Orders</SidebarLabel>
                  </SidebarLink>
                  {(!isCollapsed || isFocused) && (
                    <MenuTrigger>
                      <SidebarMenuTrigger aria-label="Manage">
                        <EllipsisHorizontalIcon />
                      </SidebarMenuTrigger>
                      <Menu
                        popover={{
                          offset: 0,
                          placement: "right top",
                        }}
                      >
                        <MenuItem href="#new-order">
                          <PlusIcon />
                          Create New Order
                        </MenuItem>
                        <MenuItem href="#view-all">
                          <ListBulletIcon />
                          View All Orders
                        </MenuItem>
                        <MenuItem href="#pending-orders">
                          <ClockIcon />
                          Pending Orders
                        </MenuItem>
                        <MenuItem href="#completed-orders">
                          <CheckCircleIcon />
                          Completed Orders
                        </MenuItem>
                        <MenuItem href="#export-orders">
                          <ArrowUpTrayIcon />
                          Export Orders
                        </MenuItem>
                      </Menu>
                    </MenuTrigger>
                  )}
                </>
              )}
            </SidebarItem>

            <SidebarItem tooltip="Products">
              {({ isCollapsed, isFocused }) => (
                <>
                  <SidebarLink href="#">
                    <CubeIcon />
                    <SidebarLabel>Products</SidebarLabel>
                  </SidebarLink>
                  {(!isCollapsed || isFocused) && (
                    <MenuTrigger>
                      <SidebarMenuTrigger aria-label="Manage">
                        <EllipsisHorizontalIcon />
                      </SidebarMenuTrigger>
                      <Menu
                        popover={{
                          offset: 0,
                          placement: "right top",
                        }}
                      >
                        <MenuItem href="#new-product">
                          <PlusIcon />
                          Add New Product
                        </MenuItem>
                        <MenuItem href="#archive">
                          <ArchiveBoxIcon />
                          Archive Product
                        </MenuItem>
                        <MenuItem href="#manage-categories">
                          <HashtagIcon />
                          Manage Categories
                        </MenuItem>
                        <MenuItem href="#import">
                          <ArrowDownTrayIcon />
                          Import Products
                        </MenuItem>
                        <MenuItem href="#export">
                          <ArrowUpTrayIcon />
                          Export Products
                        </MenuItem>
                      </Menu>
                    </MenuTrigger>
                  )}
                </>
              )}
            </SidebarItem>

            <SidebarItem href="#" tooltip="Payments">
              <CreditCardIcon />
              <SidebarLabel>Payments</SidebarLabel>
              <SidebarBadge>4 Pending</SidebarBadge>
            </SidebarItem>
          </SidebarSection>

          <SidebarDisclosureGroup defaultExpandedKeys={[1]}>
            <SidebarDisclosure id={1}>
              <SidebarDisclosureTrigger>
                <EllipsisHorizontalIcon />
                <SidebarLabel>Support</SidebarLabel>
              </SidebarDisclosureTrigger>
              <SidebarDisclosurePanel>
                <SidebarItem href="#" tooltip="Tickets">
                  <TicketIcon />
                  <SidebarLabel>Tickets</SidebarLabel>
                </SidebarItem>
                <SidebarItem href="#" tooltip="Chat Support">
                  <ChatBubbleLeftRightIcon />
                  <SidebarLabel>Chat Support</SidebarLabel>
                </SidebarItem>
                <SidebarItem href="#" tooltip="FAQ">
                  <QuestionMarkCircleIcon />
                  <SidebarLabel>FAQ</SidebarLabel>
                </SidebarItem>
                <SidebarItem href="#" tooltip="Documentation">
                  <DocumentTextIcon />
                  <SidebarLabel>Documentation</SidebarLabel>
                </SidebarItem>
              </SidebarDisclosurePanel>
            </SidebarDisclosure>
            <SidebarDisclosure id={2}>
              <SidebarDisclosureTrigger>
                <ArchiveBoxIcon />
                <SidebarLabel>Inventory</SidebarLabel>
              </SidebarDisclosureTrigger>
              <SidebarDisclosurePanel>
                <SidebarItem href="#" tooltip="Warehouse">
                  <BuildingOfficeIcon />
                  <SidebarLabel>Warehouse</SidebarLabel>
                </SidebarItem>
                <SidebarItem href="#" tooltip="Stock Levels">
                  <SidebarLabel>Stock Levels</SidebarLabel>
                  <SidebarBadge>12</SidebarBadge>
                </SidebarItem>
                <SidebarItem href="#" tooltip="Shipping">
                  <SidebarLabel>Shipping</SidebarLabel>
                  <SidebarBadge>3</SidebarBadge>
                </SidebarItem>
              </SidebarDisclosurePanel>
            </SidebarDisclosure>
          </SidebarDisclosureGroup>
        </SidebarSectionGroup>
      </SidebarContent>

      <SidebarFooter className="flex flex-row justify-between gap-4 group-data-[state=collapsed]:flex-col">
        <MenuTrigger>
          <Button
            className="flex w-full items-center justify-between outline-hidden"
            aria-label="Profile"
          >
            <div className="flex items-center gap-x-2">
              <Avatar
                className="size-8 *:size-8 group-data-[state=collapsed]:size-6 group-data-[state=collapsed]:*:size-6"
                isSquare
                src="https://intentui.com/images/avatar/cobain.jpg"
              />
              <div className="in-data-[collapsible=dock]:hidden text-sm">
                <span>Kurt Cobain</span>
                <span className="-mt-0.5 block text-muted-foreground">@kurtcobain</span>
              </div>
            </div>
            {state !== "collapsed" && <ChevronUpDownIcon className="size-5 sm:size-4" />}
          </Button>
          <Menu
            className="in-data-[sidebar-collapsible=collapsed]:min-w-56 min-w-(--trigger-width)"
            placement="bottom right"
          >
            <MenuSection>
              <MenuHeader separator>
                <span className="block">Kurt Cobain</span>
                <span className="font-normal text-muted-foreground">@cobain</span>
              </MenuHeader>
            </MenuSection>

            <MenuItem href="#dashboard">
              <HomeIcon />
              Dashboard
            </MenuItem>
            <MenuItem href="#settings">
              <Cog6ToothIcon />
              Settings
            </MenuItem>
            <MenuItem href="#security">
              <ShieldCheckIcon />
              Security
            </MenuItem>
            <MenuSeparator />
            <MenuItem href="#contact">
              <LifebuoyIcon />
              Customer Support
            </MenuItem>
            <MenuSeparator />
            <MenuItem href="#logout">
              <ArrowRightStartOnRectangleIcon />
              Log out
            </MenuItem>
          </Menu>
        </MenuTrigger>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}
```