Components / Sidebar

Sidebar

<Sidebar />New

The product's primary left app rail — a static team header, an optional scope switch, grouped navigation, and a footer account menu, collapsible to a 72px icon-and-label rail. A composable family built on our DropdownMenu and Avatar, tokenized end to end.

import { Sidebar, SidebarWorkspace, SidebarAccount, SidebarScope, SidebarContent, SidebarGroup, SidebarItem, SidebarFooter } from "@/components/upnext";

Explorer

Cross the nav item's state against the rail layout. Every fill, text, icon and badge color resolves from a semantic token — hover any swatch for hex + token.

State

Trailing

Rail

1<SidebarItem
2  icon={<Home />}
3  label="Home"
4  active
5/>

Parts & states

The full rail reproduced from the product reference, its collapsed form, a few ways to compose it, and each part in isolation. The Full and Collapsed rails are live — toggle the collapse control in the workspace header.

Home

Football workspace · Alabama

1<Sidebar>
2  {/* Static team header — not clickable (omit the account menu). */}
3  <SidebarWorkspace name="Alabama" logo={<Avatar size="xs" color="crimson"><AvatarFallback>A</AvatarFallback></Avatar>} />
4
5  <SidebarScope options={sports} value={sport} onValueChange={setSport} />
6
7  <SidebarContent>
8    <SidebarGroup>
9      <SidebarItem icon={<Home />} label="Home" active />
10      <SidebarItem icon={<ArrowLeftRight />} label="Transfer activity" shortLabel="Transfer" />
11    </SidebarGroup>
12
13    <SidebarGroup label="Discover">
14      <SidebarItem icon={<UserSearch />} label="Athletes" />
15      <SidebarItem icon={<Users />} label="Teams" />
16      <SidebarItem icon={<Briefcase />} label="Agencies" beta />
17      <SidebarItem icon={<LineChart />} label="Insights" beta />
18    </SidebarGroup>
19
20    <SidebarGroup label="Scouting">
21      <SidebarItem icon={<Bookmark />} label="Lists" />
22      <SidebarItem icon={<Columns3 />} label="Recruit board" shortLabel="Board" />
23    </SidebarGroup>
24  </SidebarContent>
25
26  <SidebarFooter>
27    <SidebarItem icon={<Activity />} label="Internal team activity" shortLabel="Activity" />
28    <SidebarItem icon={<MessageSquare />} label="Messages" />
29
30    {/* Account menu — opens upward with Settings · Report · Log out. */}
31    <SidebarAccount name="Jordan Fisher" avatar={<Avatar size="xs" color="cobalt"><AvatarFallback>JF</AvatarFallback></Avatar>}>
32      <DropdownMenuItem><Settings /> Settings</DropdownMenuItem>
33      <DropdownMenuItem><Flag /> Report an issue</DropdownMenuItem>
34      <DropdownMenuSeparator />
35      <DropdownMenuItem variant="destructive"><LogOut /> Log out</DropdownMenuItem>
36    </SidebarAccount>
37  </SidebarFooter>
38</Sidebar>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.