VLLNT UI · Component family

Navigation components

Navigation components move people through an app — menus, breadcrumbs, tabs, pagination, docks, rails, and floating navbars. Keyboard-accessible and composable into any shell.

Navigation Bars

Top-level header bars, menu bars, and site chrome for orienting users across React and Next.js apps.

Navbar SaaS

SaaS-style navigation bar with branding and links. Install Navbar SaaS from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Navigation Menu

Accessible navigation menu with links and sub-navigation. Install Navigation Menu from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Menubar

Horizontal menu bar with dropdown menus. Install Menubar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Floating Navbar

Floating navigation bar that hides on scroll down and reveals on scroll up. Install Floating Navbar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Top Bar

Workspace header bar for titles, leading controls, centered navigation, and trailing actions. Install Top Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sidebars & Rails

Collapsible sidebars, vertical rails, and side docks for persistent app and canvas navigation.

Sidebar

Collapsible sidebar navigation layout. Install Sidebar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sidebar Provider

Context provider for managing sidebar open/close state. Install Sidebar Provider from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sidebar Toggle

Responsive toggle button for opening and closing the sidebar. Install Sidebar Toggle from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Left Rail

Compact vertical rail for canvas modes, tool actions, and secondary navigation controls. Install Left Rail from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Right Dock

Context dock for inspectors, summaries, and secondary canvas panels. Install Right Dock from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Docks & Bottom Bars

macOS-style docks and pinned bottom bars that host quick actions and calm canvas chrome.

Dock

macOS-style dock whose icons magnify near the pointer. Install Dock from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Jarvis Dock

Floating bottom dock with quick-action buttons + a command-palette trigger. Install Jarvis Dock from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Bottom Bar

Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators. Install Bottom Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tabs & Views

Tabs, view switchers, and saved-view bookmarks for toggling between panels, workspaces, and layouts.

Tabs

Tabbed content panels with keyboard-accessible tab triggers. Install Tabs from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Animated Tabs

Tabs with a sliding indicator that animates to the active item. Install Animated Tabs from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

View Switcher

URL param-based toggle between named views with pill/tab styling. Install View Switcher from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Workspace Switcher

Segmented workspace picker for switching between canvas views and operational contexts. Install Workspace Switcher from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Viewport Bookmarks

Saved-view list for the canvas — pinned spatial locations with optional active state. Install Viewport Bookmarks from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Breadcrumbs & Paging

Breadcrumb trails, pagination, step navigation, and scroll rows for moving through paged and hierarchical content.

Breadcrumb

Navigation breadcrumb trail showing the current page hierarchy. Install Breadcrumb from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

World Breadcrumbs

Spatial trail showing the canvas's current location in a hierarchy of worlds, groups, and runs. Install World Breadcrumbs from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Pagination

Page navigation controls with previous, next, and page links. Install Pagination from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Step Navigation

Navigation controls for stepping through multi-page content. Install Step Navigation from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Horizontal Scroll Row

Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar. Install Horizontal Scroll Row from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Frequently asked

What's in the navigation family?
Menus and menubars, breadcrumbs, tabs, pagination, command palettes, docks and rails, and floating navbars — everything for moving through an app.