Navigation
39 components.
Navigation
Back to TopFloating button that appears as you scroll the page and smoothly scrolls back to the top. Bottom NavigationA fixed bottom bar of icon plus label destinations in mobile style, with support for slotted item elements or a JSON items property. BreadcrumbNavigation trail that shows the current page's location within the site hierarchy. BurgerA hamburger menu toggle button that animates between a hamburger glyph and an X, dispatching a change event on every toggle. CommandCommand palette with substring search and keyboard navigation. DockmacOS-style icon bar that magnifies items as the pointer gets closer. MenubarApplication menu bar with dropdown menus and keyboard navigation. Navigation MenuHorizontal navigation bar with rich panels that open on hover or click. PaginationPage navigation with Previous/Next buttons and ellipsis truncation. Scroll AreaScroll container with a thin scrollbar styled by the theme. Scroll ProgressA thin bar fixed at the top of the viewport that fills from 0% to 100% as the page is scrolled. Scroll SpyTable-of-contents navigation that automatically highlights the link of the visible section as the user scrolls the page. SidebarSide navigation panel with a header, scrollable body and footer that turns into a drawer on mobile. Skip NavA "Skip to content" link, visually hidden until focused, that jumps to a target anchor. StepperStep indicator with numbered circles that shows completed, current and upcoming progress. TabsSwitches between content panels with an accessible tab bar. ToolbarContainer that groups controls into a bar with roving focus via arrow keys and horizontal or vertical orientation.
Overlay
Alert DialogConfirmation modal that requires a decision from the user before closing. Context MenuRight-click menu that opens a floating panel at the pointer position. Cookie ConsentCookie consent banner pinned to the viewport, with accept, decline and per-category preferences, that remembers the visitor's choice. DialogModal window built on the native dialog element, with backdrop, focus trapping, and ESC to close. DrawerSliding drawer anchored to the bottom of the screen, built on the native dialog element. Dropdown MenuAction menu that opens from a trigger, with keyboard navigation. Floating WindowA draggable, resizable floating window/panel with a title bar, close/minimize/maximize controls, and viewport containment. Hover CardInformational card that reveals rich content when you hover over or focus the trigger. Keyboard ShortcutsHelp modal that lists the page's keyboard shortcuts, grouped by section. LightboxThumbnail gallery that opens images in a fullscreen viewer with navigation, built on the native dialog element. OverlayStandalone dimming scrim and loading overlay layer, separate from dialog, with optional spinner and dismissable behavior. PopconfirmConfirmation popover anchored to a slotted trigger element, showing a message with Confirm and Cancel buttons built on the native Popover API. PopoverFloating panel anchored to a trigger, with click-outside and ESC dismissal. SheetSliding panel over a modal backdrop, anchored to any edge of the screen. Speed DialFloating action button (FAB) pinned to a corner of the viewport that fans out into secondary actions. Split ButtonPrimary action button coupled to a caret that opens a dropdown menu of secondary actions. SpotlightDims the entire page, leaving only one element highlighted through a transparent cutout. TooltipFloating hint that appears when you hover over or focus an element. TourStep-by-step guided tour that highlights page elements with a spotlight and coachmarks.