Components

Navigation

Tabs, docks, menus and breadcrumbs that move people around.

36 of 62

Loading the full search index.

Dock menu

1528Dock menuNavigationA bottom dock whose icons take their size from the pointer distance, with a label above the icon under the cursor and a dot under the active one.

ARIA Tablist Resize

1914ARIA Tablist ResizeNavigationA fully accessible roving-tabindex tab list with a gliding pill highlight, where the panel frame smoothly resizes to whichever tab's content is showing.

Auto height tabs

1916Auto height tabsNavigationA tab group whose content container smoothly resizes its height to fit each panel as you switch tabs, instead of jumping or leaving empty space.

Bare Sliding Tab Strip

1920Bare Sliding Tab StripNavigationAn unstyled-by-default tab strip whose panels sit side by side on a filmstrip that slides sideways on switch while the frame's height eases to match.

Card blur tabs

1928Card blur tabsNavigationTabs framed in a bordered card whose content briefly blurs and crossfades when you switch panels, with a sliding pill behind the active tab label.

Collapsible app sidebar

1939Collapsible app sidebarNavigationA full application sidebar with grouped navigation links, an active-item highlight, a toggle that collapses it to an icon-only rail, and a slide-in drawer on narrow screens.

1940Collapsible Icon SidebarNavigationA full app shell with a left sidebar that collapses to icon-only width, nested menu sections that expand, and a hover highlight that glides between menu rows.

Flyout Menu Highlight

1963Flyout Menu HighlightNavigationA dropdown menu whose items sit under a highlight box that glides from one hovered or focused row to the next, with a nested submenu that flies out to the side.

1981Icon label tabsNavigationA row of icon-and-label tab chips with a sliding highlight, where the panel below slides in the direction of the chosen tab.

Keyboard pill tabs

1986Keyboard pill tabsNavigationA two-tab switcher with a pill highlight that glides between labels and full roving-focus keyboard navigation between tabs.

Adjacent hover menubar

2106Adjacent hover menubarNavigationA desktop-style menu bar where clicking one menu opens it, and once open, hovering any adjacent menu switches straight to that one without an extra click.

App Menubar

2107App MenubarNavigationA desktop-style horizontal menu bar where clicking a top-level label opens its dropdown, and once one is open, hovering across the other labels switches directly to their menus without an extra click.

Auto-Hide Nav Bar

2111Auto-Hide Nav BarNavigationA sticky top bar that slides up out of view as the visitor scrolls down and slides back in as soon as they scroll up.

Chameleon pill navbar

2120Chameleon pill navbarNavigationA row of nav links in one dark capsule where the active link splits into its own pill and the rest close back up around it.

Collapsing trail breadcrumb

2123Collapsing trail breadcrumbNavigationA path trail with chevron separators whose middle steps collapse into an ellipsis button that opens a menu of the hidden steps.

2149Expanding icon toolbarNavigationA row of circular icon buttons where the selected tool expands into a filled pill with its label, plus a bell that drops open a notification list and a two-state lock pill.

Expanding label toolbar

2150Expanding label toolbarNavigationA row of icon tool buttons where the selected one expands to show its label, with a floating confirmation bubble and a separate lock toggle.

Grouped magnify dock

2162Grouped magnify dockNavigationA bottom dock of round icon buttons split into two clusters that grow the closer the pointer gets to each one.

Grouped settings dropdown

2163Grouped settings dropdownNavigationA button-triggered dropdown with labeled sections, a nested submenu, and a radio group for picking one of several settings values.

Inline command list

2173Inline command listNavigationA search field over grouped, filterable action rows that narrows as you type and moves a highlight with the arrow keys, meant to sit inline rather than in a dialog.

2188Magnifying icon dockNavigationA row of app icons in a translucent bar that grow larger the closer the pointer gets to each one, easing back to normal size when the pointer leaves.

Morphing Pill Navbar

2194Morphing Pill NavbarNavigationA row of navigation labels in a dark pill where the active label breaks into its own filled pill and the remaining labels regroup into a second pill that reflows around it.

Bubble burst menu

2309Bubble burst menuNavigationA floating logo pill and toggle that expand into a full screen overlay of oversized pill links, each bursting into place with a springy stagger.

Circle reveal sidebar

2318Circle reveal sidebarNavigationA menu panel that opens as a circle growing out of its own toggle, with rows springing up in sequence and the toggle bars folding into a cross.

Collapsible App Sidebar

2322Collapsible App SidebarNavigationAn application sidebar with grouped navigation links that collapses to an icon-only rail, slides in as an overlay on narrow screens, and toggles with a keyboard shortcut.

Dot Scale Page Indicator

2338Dot Scale Page IndicatorNavigationA minimal pagination strip of small numbered dots that scale up and brighten on hover or when active, flanked by text previous and next links that fade when disabled.

Dropdown Action Menu

2344Dropdown Action MenuNavigationA button-triggered dropdown menu with grouped items, right-aligned keyboard shortcut labels, and a toggle-style row, closing automatically after most selections.

Expanding card navbar

2349Expanding card navbarNavigationA slim rounded navbar whose hamburger toggle expands it downward into a row of colored link cards, each card's links staggering into view.

Filterable action list

2354Filterable action listNavigationA search box paired with a live-filtered list of actions grouped under labels, highlighting the first match and showing an empty state when nothing fits the query.

Gooey Particle Nav

2359Gooey Particle NavNavigationA horizontal nav list where selecting an item morphs a blurred goo pill to the new position while a burst of small particles scatters outward from it.

2361Grouped icon toolbarNavigationA compact horizontal toolbar that clusters icon buttons into groups divided by thin separators, for quick formatting-style actions.

Hover duplicate text nav

2365Hover duplicate text navNavigationA vertical nav list slides each label upward and off the top on hover while a duplicate label slides in from below to take its place.

Hover slide nav labels

2366Hover slide nav labelsNavigationA vertical navigation list where hovering or focusing a label slides a duplicate copy up into view while the original slides out, so the label appears to refresh itself.

2382Magnifying icon dockNavigationA macOS-style dock of circular icon buttons that grow smoothly as the pointer nears them and reveal a label above the active icon.

Marquee reveal menu

2383Marquee reveal menuNavigationA stack of full-height rows where hovering a row slides in a scrolling colored band of its label and a thumbnail from the pointer's nearest edge.

Mega nav menu

2386Mega nav menuNavigationA horizontal top navigation bar whose triggers open dropdown or mega panels sharing one animated viewport that resizes to fit each panel's content.

Open the full index

Tags

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)