1

Workspace

A sectioned workspace sidebar: a workspace select and a new page button on top, main links, titled groups of pages, and settings pinned to the bottom. A button in the page header slides it away and the page follows its edge.

Dependencies

@hugeicons/react@hugeicons/core-free-iconsmotion

Interaction Type

An aside with a labelled nav and plain link lists; the current page has aria-current and an accent icon. Toggles are buttons with aria-expanded and aria-controls. Below the medium breakpoint the sidebar becomes a sheet opened from a menu button: focus moves in and is trapped, Escape or the backdrop closes it, and focus returns to the menu button. Only transform and clip-path animate, and reduced motion turns it off.

Props

Options you can pass to customize this component.

Prop
Type
Description
workspaces
{ value: string; label: string }[]

Options in the native workspace select.

workspace
string

Controlled workspace value.

defaultWorkspace
string

Initial workspace when uncontrolled.

onWorkspaceChange
(value: string) => void

Called when a workspace is picked.

primary
{ id: string; label: string; href: string; icon?: ReactNode }[]

Links at the top of the sidebar.

groups
{ id: string; label?: string; items: SidebarItem[] }[]

Titled lists under the main links, such as recent and favorite pages.

secondary
SidebarItem[]

Links pinned to the bottom edge.

value
string

Controlled id of the current item. It gets aria-current="page".

defaultValue
string

Initial current item when uncontrolled.

onValueChange
(id: string) => void

Called with the item id when a link is pressed.

open
boolean

Controlled state: whether the sidebar is shown from the medium breakpoint.

defaultOpen
boolean

Initial state when uncontrolled. Defaults to true.

onOpenChange
(open: boolean) => void

Called when the toggle is pressed.

onNewPage
() => void

Called when the new page button is pressed.

workspaceLabel, newPageLabel, showLabel, hideLabel
string

Hidden label of the select and accessible names of the buttons.

title
ReactNode

Heading of the page area. Defaults to the label of the current item.

children
ReactNode

Content of the page area. Defaults to a placeholder layout.

sidebarLabel, navLabel, menuLabel, closeLabel
string

Accessible names of the sidebar, its navigation and the mobile menu buttons, all overridable for localization.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/sidebar-workspace.json

How to use

<SidebarWorkspace
  workspace={workspace}
  onWorkspaceChange={setWorkspace}
  value={pageId}
  onValueChange={setPageId}
  onNewPage={createPage}
>
  <Editor />
</SidebarWorkspace>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app/dashboard

Overview

npx shadcn@latest addhttps://ui.nexvyn.dev/r/sidebar-workspace.json