1

Rail

A full width header with the brand and account, and an icon rail under it. Hovering or tabbing into the rail opens it over the page without moving it; the button at the bottom keeps it open and makes room for it.

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
items
{ id: string; label: string; href: string; icon?: ReactNode }[]

Links in the rail. Give each an icon, since the rail shows icons only.

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 rail is kept open and pushes the page.

defaultOpen
boolean

Initial state when uncontrolled. Defaults to false.

onOpenChange
(open: boolean) => void

Called when the toggle is pressed.

peek
"hover""off"

Whether the closed rail opens over the page on hover and keyboard focus. Defaults to "hover".

brand
string

Name beside the mark in the header.

brandHref
string

Where the brand link points.

userName
string

Name behind the initials avatar; also the accessible name of its link.

accountHref
string

Where the avatar link points.

expandLabel, collapseLabel
string

Accessible names of the keep open button in each state.

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-rail.json

How to use

<SidebarRail peek="hover" value={section} onValueChange={setSection}>
  <Dashboard />
</SidebarRail>

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
Nexvyn

Overview

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