Navigation components
13 Navigation components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Breadcrumb, IconRailSidebar, Menubar, MobileNavKit, NavigationMenu, Pagination, ProductSwitcher, SidebarCustomize, Stepper, Tabs, TreeView, UserMenu, WorkspaceSwitcher.
- BreadcrumbLocation trail for the app header - a nav landmark with an ordered list, links, a current page and directional separators.
- IconRailSidebarTwo-level navigation. A slim rail of icons picks the section and a sub-sidebar beside it lists that section's pages. Folds into a sheet on mobile.
- MenubarDesktop-app menu bar (File, Edit, View) on Base UI Menubar and Menu, with submenus, checkbox and radio items and Kbd shortcuts. Uses the same item styles as DropdownMenu.
- MobileNavKitMobile navigation, a bottom tab bar with badges, swipe-action list rows that also open a context menu, and a horizontally scrolling filter strip.
- NavigationMenuMarketing-site header menu on Base UI NavigationMenu, with chevron triggers, a shared animated panel, link lists and a featured card slot. Works in RTL.
- PaginationNumbered Pagination with ellipsis, CursorPager (previous/next with a "Showing X-Y" label) and LoadMore button with a loading state.
- ProductSwitcherApp launcher grid that shows each installed product's official mark, plus a sidebar products group and "Switch to…" palette commands.
- SidebarCustomizeLets users reorder and hide sidebar items - a persisted layout hook, drag-to-reorder in the sidebar, and an accessible customize dialog.
- StepperOrdered steps with markers and connectors, horizontal or vertical, with complete, current, upcoming and error states.
- TabsSwitches between views of the same subject without leaving the page; segmented or underline style with a sliding indicator, built on Base UI Tabs.
- TreeViewAn accessible tree of nested items with expand and collapse, single or multiple selection, roving-tabindex keyboard navigation with typeahead, lazy children and RTL-aware arrow keys.
- UserMenuAvatar menu at the bottom of the sidebar - identity, your account items, theme and language submenus, and sign out.
- WorkspaceSwitcherOrganisation / team switcher for the top of the sidebar, with logo, plan line, an optional "Add workspace" item and room for extra menu items.
WebVitalsPage
A web vitals report - a Core Web Vitals verdict, gauges for LCP, INP, CLS, FCP and TTFB with distributions, a trend chart with Google's limits, and pages to fix.
Breadcrumb
Location trail for the app header - a nav landmark with an ordered list, links, a current page and directional separators.