Navigation rail

Linear: AUT-122

Left-edge nav for every product surface — record setup, library, editor, cursor studio, prefs. Structural only: the selected section is passed in from above; the rail never owns that state.

Open as live demo →

Selected per section

The active class is applied only to the matching item — no internal state, no router. Each story below renders the rail with a different active=AppSection::…:

Composition

flowchart LR
    Rail[NavigationRail] --> Workspace[WorkspaceBadge]
    Rail --> Items[NavItemView × N]
    Rail --> User[UserAvatar?]
    Workspace -->|on_workspace_click| Parent
    Items -->|active=AppSection| Parent
    User -->|on_user_click| Parent

The rail composes three primitives from shell/:

• WorkspaceBadge at the top — the red workspace tile + chevron. Visual only; the workspace switcher menu (UI-05) is the parent's job.
• A list of NavItemView rows, one per AppSection.
• UserAvatar at the bottom — optional. Pass None on surfaces that don't show a signed-in user.

API

#![allow(unused)]
fn main() {
use ui_storybook::components::{
    AppSection, NavItemView, NavigationRail,
    WorkspaceBadgeView, UserAvatarView,
};

view! {
    <NavigationRail
        items=items                // Vec<NavItemView>
        active=AppSection::Editor  // explicit prop
        workspace=workspace        // WorkspaceBadgeView
        user=user                  // Option<UserAvatarView>
    />
}
}

NavItemView lets every row carry icon, label, optional notification count, and a disabled flag (rendered with reduced opacity + aria-disabled).

States covered