VLLNT UI · Famille de composants
Composants Navigation
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.
1 storyNavigation Menu
Accessible navigation menu with links and sub-navigation.
1 storyMenubar
Horizontal menu bar with dropdown menus.
1 storyFloating Navbar
Floating navigation bar that hides on scroll down and reveals on scroll up.
1 storyTop Bar
Workspace header bar for titles, leading controls, centered navigation, and trailing actions.
1 storySidebars & Rails
Collapsible sidebars, vertical rails, and side docks for persistent app and canvas navigation.
Sidebar
Collapsible sidebar navigation layout.
1 storySidebar Provider
Context provider for managing sidebar open/close state.
1 storySidebar Toggle
Responsive toggle button for opening and closing the sidebar.
1 storyLeft Rail
Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.
1 storyRight Dock
Context dock for inspectors, summaries, and secondary canvas panels.
1 storyDocks & 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.
1 storyJarvis Dock
Floating bottom dock with quick-action buttons + a command-palette trigger.
4 storiesBottom Bar
Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators.
1 storyTabs & Views
Tabs, view switchers, and saved-view bookmarks for toggling between panels, workspaces, and layouts.
Tabs
Tabbed content panels with keyboard-accessible tab triggers.
1 storyAnimated Tabs
Tabs with a sliding indicator that animates to the active item.
2 storiesView Switcher
URL param-based toggle between named views with pill/tab styling.
1 storyWorkspace Switcher
Segmented workspace picker for switching between canvas views and operational contexts.
1 storyViewport Bookmarks
Saved-view list for the canvas — pinned spatial locations with optional active state.
4 storiesBreadcrumbs & 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.
1 storyWorld Breadcrumbs
Spatial trail showing the canvas's current location in a hierarchy of worlds, groups, and runs.
4 storiesPagination
Page navigation controls with previous, next, and page links.
1 storyStep Navigation
Navigation controls for stepping through multi-page content.
1 storyHorizontal Scroll Row
Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.
2 storiesLisible par les agents
Votre agent IA peut aussi les installer.
Le registre est expose comme donnees structurees, afin que les agents de code choisissent le bon composant sans scraper le HTML.
Questions frequentes
- 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.