Thành phần

Sidebar

Side navigation: hairline edge, heavy-rule active item, collapsible groups, icon rail with tooltips and a sheet on small screens.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

The register

Choose a section from the sidebar. Ctrl+B or the toggle collapses it to icons.

Viewing: Notices

Use the toggle, or Ctrl+B (Cmd+B on a Mac), to collapse it. Below 768px wide it opens as a sheet.

Install

bash

npx shadcn add @eloquent/sidebar

It installs collapsible, sheet, tooltip and separator with it.

Usage

tsx

import {
  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInset, SidebarMenu,
  SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger,
} from "@/components/ui/sidebar";

<SidebarProvider>
  <Sidebar label="Main navigation" collapsible="icon" closeLabel="Close">
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Register</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton render={<a href="/notices" />} isActive tooltip="Notices">
                <InboxIcon aria-hidden="true" />
                <span>Notices</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger aria-label="Toggle sidebar" />
    <main>…</main>
  </SidebarInset>
</SidebarProvider>

Wrap each label in a <span>; in the icon rail the spans become screen-reader-only, so every icon button keeps its name.
label and the trigger's aria-label are required, because the text comes from props.
Use SidebarCollapsible, SidebarCollapsibleTrigger and SidebarCollapsibleContent for a group that opens and closes. In the icon rail a closed group's items are not shown, so keep groups you want visible open.
useSidebar() returns state, open, setOpen, openMobile, isMobile and toggleSidebar.

States

State	Treatment
Expanded	16rem wide, a 1px ink rule on the inner edge
Collapsed to icons	3.5rem rail; the tooltip names the icon on keyboard focus
Active item	3px ink left rule, `tint-1` fill, semibold, `aria-current="page"`
Pressed item	Ink fill with paper text; no hover effect
Focus-visible	2px ink outline drawn inside the item
Disabled item	`halftone` text, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move through the trigger's menu buttons, group triggers and links in page order
Enter / Space	Activate an item; toggle a collapsible group; operate the sidebar toggle
Ctrl+B / Cmd+B	Collapse or expand the sidebar (set `keyboardShortcut` on the provider to change the letter, or `false` to turn it off)
Esc	On small screens, close the sheet; focus returns to the toggle

In the icon rail, focusing an icon shows its tooltip. The sheet on small screens keeps focus inside until it closes.

Vietnamese

Sổ đăng ký

Chọn một phần ở thanh bên. Ctrl+B hoặc nút bật tắt sẽ thu gọn thanh bên thành các biểu tượng.

Đang xem: Thông báo

Ink adaptation

Upstream shadcn's rounded items, hover fills, shadow and drag rail are removed. A hairline marks the inner edge, a heavy rule sits under the header and a hairline above the footer. The active item is marked by a 3px ink rule as well as a tint-1 fill, so it never relies on tone. Focus rings are drawn inside the items because the sidebar scrolls and would clip an outside ring. Widths change without a transition: only opacity and transform animate. SidebarMenuAction, SidebarMenuSkeleton and SidebarRail are not included.