App sidebar

The main navigation of the product, expanded or collapsed to icons.

Live React portWildAppSidebar.vueNavigation/App SidebarWildAppSidebar

Try it

Click a destination, open Sites or Operations, and hover the rail to find the collapse button on its edge.

Current page

Collapsed

Account

const [active, setActive] = useState('Inventory');
const [collapsed, setCollapsed] = useState(false);

<WildAppSidebar
  active={active}
  collapsed={collapsed}
  user={user}
  onNavigate={setActive}
  onCollapsedChange={setCollapsed}
  onLogout={logOut}
/>

Collapsed, a row shows its name beside the rail on hover and on keyboard focus.

When to use

Use it on every signed-in screen, as the frame for the top-level destinations.
Let people collapse it to 56px when they need the width, and keep their choice from screen to screen.

Don’t use it

For the pages inside one area, listed beside its content. Use Sidebar nav.
To switch between views of one subject on a page. Use Tabs.

Anatomy

From the top: the logo, seven destinations, Settings in a group of its own, and the account, with an avatar, a name and Log out. A chevron marks a destination whose pages open in a flyout, and the collapse button shows on the right edge on hover.

States

Expanded is 232px and collapsed is 56px. Collapsing keeps every icon in the same place, so a destination stays where people learned it.

Collapsed hides the labels, chevrons, name and Log out. The current row keeps its grey fill and blue icon.

Content

Show the person’s full name. A long one ends in an ellipsis.
Use two initials in the avatar, from the first and last name.

Accessibility

The rail is a navigation landmark named “Application navigation”. The logo reads as “Wildeye”, the collapse button as “Collapse sidebar” or “Expand sidebar”, collapsed rows keep their names, and the current page carries aria-current="page".

Key	What it does
Tab	Moves to the collapse button, each destination and an open flyout’s pages, then Log out while expanded.
Enter / Space	Opens the destination or its flyout, collapses or expands the rail, or logs out.
Escape	Closes the flyout and returns focus to its row.

Props

Each handler makes its part of the rail interactive. Without them the rail is static and has no tab stops.

Prop	Type	Default	Description
active	string	—	Label of the current destination or flyout page.
collapsed	boolean	false	Shows the 56px icon rail.
user	{ initials: string; name: string } \| null	a sample user	The account at the base. null hides it.
onNavigate	(label: string) => void	—	Called with the destination or flyout page that was chosen.
onCollapsedChange	(collapsed: boolean) => void	—	Called with the next value when the collapse button is pressed.
onLogout	() => void	—	Called when Log out is pressed.

Tokens

Token	Value	Where it lands
--color-grey-50	#FDFDFD	Rail surface.
--color-white	#FFFFFF	Collapse button and flyout ground.
--color-grey-300	#ECECED	Right edge, current fill, collapse and flyout borders.
--color-grey-200	#F1F1F1	Dividers, and row, page and Log out hover.
--color-grey-100	#F5F5F5	Collapse button hover.
--color-grey-900	#4F4D55	Rows and flyout pages at rest.
--color-grey-800	#7F7D83	Flyout page icons.
--color-text-primary	#0A090B	Current and hovered labels, name, hovered button icons.
--global-blue-1000	#1877F2	Current icons, 3.59:1 on the current fill.
--global-blue-1100	#0C296A	Avatar initials, 12.75:1 on the avatar ground.
--color-primary-light	#EBFAFF	Avatar ground.
(no token)	#4F4D55	Log out and collapse icons at rest.
--color-primary-active	#1877F2	Keyboard focus ring.
(no token)	0 1px 3px rgba(10,9,11,.1)	Collapse button lift.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	Flyout lift.
--radius-lg	8px	Row and flyout corners.
--radius-md	6px	Log out and flyout page corners.
--radius-full	9999px	Avatar and collapse button.