Learn 36 Navigation concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
A persistent page region containing brand, primary navigation, and global actions.
Create a responsive site header with a home-linked logo, clearly labelled primary navigation, current-page indication, keyboard-visible focus, optional global actions, and a compact mobile presentation.A horizontal row of links for the main destinations of a site or application.
Create an accessible horizontal top navigation bar with concise destination labels, a visible current-page state, logical tab order, generous targets, overflow handling, and a mobile alternative.A compact set of secondary links such as help, settings, language, and contact.
Create compact utility navigation for Help, Documentation, Language, and Contact links, separate it visually from primary navigation, preserve accessible link names, and collapse low-priority items responsibly on small screens.A large navigation panel that organizes many destinations into labelled columns.
Create an accessible mega menu with a disclosure button, grouped link columns with headings, clear open and closed states, Escape and outside-click dismissal, reliable focus management, and a usable stacked mobile version.Navigation whose buttons reveal ordinary lists of related links.
Create website dropdown navigation using disclosure buttons and normal links rather than ARIA menu roles, with aria-expanded, optional arrow-key support, Escape dismissal, outside-click handling, and a touch-friendly mobile layout.A desktop-style composite menu with application-like arrow-key behavior.
Create an ARIA menubar only for an application-like navigation experience, implementing roving tabindex, arrow keys, Home, End, character search, nested submenus, Escape behavior, focus return, and complete menuitem semantics.A compact button that reveals primary navigation when space is limited.
Create an accessible hamburger navigation button with an explicit Menu label, aria-expanded and aria-controls, an animated but reduced-motion-safe icon, focus handling, Escape dismissal, and a full-height mobile link panel.Grouped destination links placed in the site footer.
Create responsive footer navigation with short labelled link groups, a separate legal row, descriptive link text, clear keyboard focus, logical reading order, and collapsible sections on narrow screens only when necessary.A launcher for moving between products, workspaces, or applications.
Create an accessible app switcher opened by a clearly labelled button, showing recognizable product names and icons in a keyboard-navigable grid, with search for long lists, current-product indication, and predictable focus return.A profile-triggered menu for account destinations and sign-out.
Create an accessible account menu triggered by a labelled avatar button, with profile, settings, billing, and sign-out items, correct menu-button semantics, keyboard navigation, Escape dismissal, and focus return to the trigger.Persistent vertical navigation for sections within a product or workspace.
Create an accessible application sidebar with labelled sections, icons paired with text, a visible current destination, keyboard focus, scroll handling, and a responsive drawer alternative for smaller screens.A sidebar that can reduce to icons or be hidden to free content space.
Create a collapsible sidebar that preserves labelled navigation in its expanded state, supplies tooltips and accessible names in icon-only mode, persists the user preference, supports keyboard operation, and becomes a drawer on mobile.A side panel containing navigation that can be persistent or temporarily overlay content.
Create an accessible navigation drawer with a labelled trigger, modal behavior only for the temporary variant, focus containment, Escape and scrim dismissal, focus return, current-page indication, and a persistent desktop variant when space allows.A narrow vertical strip for a small set of top-level application destinations.
Create a navigation rail for three to seven top-level destinations using icons with persistent text labels, a strong selected state, accessible names, large targets, optional badge counts, and adaptation to bottom navigation on compact screens.A mobile bar for quickly switching among a few top-level destinations.
Create mobile bottom navigation for three to five top-level destinations with icons and text labels, a clear active state, safe-area padding, stable placement, badge support, and no action buttons disguised as destinations.A platform-style control for switching between top-level application sections.
Create a persistent tab bar for top-level app sections with concise icon-and-text labels, preserved navigation state per tab, a clear selected state, stable item order, safe-area support, and five or fewer default destinations.A list and detail layout where selecting an item navigates the adjacent pane.
Create a responsive master-detail navigation layout with a selectable item list, current-item indication, an adjacent detail pane on wide screens, back navigation on compact screens, shareable URLs, and restored scroll and selection state.A compact floating strip of frequently used application destinations.
Create an accessible application dock with labelled destination icons, a visible active state, keyboard navigation, tooltips that do not replace accessible names, badge counts, responsive spacing, and reduced-motion-safe hover treatment.Navigation for subsections within the currently selected primary destination.
Create accessible secondary navigation for the current product section, with a labelled nav landmark distinct from primary navigation, a visible current page, responsive overflow behavior, and consistent placement across related pages.A trail of parent links that communicates the current location in a hierarchy.
Create accessible location-based breadcrumbs inside a labelled navigation landmark, using an ordered list, linked parent levels, aria-current on the current page when included, non-interactive separators, and compact overflow on mobile.A row of labels that switches among related content panels without leaving the page.
Create accessible content tabs following the ARIA tabs pattern, with tab, tablist, and tabpanel relationships, arrow-key movement, Home and End support, visible focus, selected-state styling, and responsive overflow handling.Controls for navigating through multiple pages of similar content.
Create accessible search-result pagination in a labelled navigation landmark with previous and next links, numbered pages, aria-current for the active page, understandable ellipses, generous targets, URL-based state, and a compact mobile variant.Paired links for moving through an ordered sequence of related pages.
Create accessible previous and next navigation for a documentation sequence, with directional labels, the neighboring page titles, clear link semantics, logical reading order, disabled-edge handling, and stacked mobile layout.A link that returns to a known parent page or previous step.
Create a clear Back link that points to a known parent or prior step, uses a real link and meaningful destination, remains separate from breadcrumbs, preserves entered state when appropriate, and does not rely only on browser history.A progress-oriented navigator for moving among steps in a linear task.
Create accessible step navigation for a four-step application, distinguish completed, current, and upcoming steps in text and visually, allow revisiting only valid steps, announce progress, and provide separate Back and Continue controls.A structured list of links to major sections within long-form content.
Create an accessible table of contents for a long article using a labelled navigation landmark, links matching the heading hierarchy, visible focus, stable anchor targets, optional nesting, and a collapsible mobile presentation.Links that jump directly to sections on the current page.
Create accessible in-page anchor navigation with links to valid unique heading IDs, smooth scrolling that respects reduced motion, scroll-margin for sticky headers, focus placement after navigation, and a clear Back to top option.A hierarchical navigator with expandable parent nodes and nested destinations.
Create tree navigation only when full tree-widget behavior is needed, implementing arrow-key traversal, Home and End, expand and collapse, focus-versus-selection styling, aria-level metadata, and a simpler disclosure navigation alternative for ordinary websites.A broad hierarchical index of the major destinations across a site.
Create an accessible HTML sitemap with semantic nested lists, descriptive section headings, plain links to important destinations, no redundant interaction model, responsive columns, and a hierarchy matching the actual information architecture.A searchable keyboard-first launcher for destinations and commands.
Create an accessible command palette opened by a documented keyboard shortcut and visible trigger, with a labelled search field, grouped destinations and actions, arrow-key navigation, recent items, empty states, Escape dismissal, and focus restoration.Search designed primarily to help people reach pages or product areas.
Create accessible global navigation search with a persistent label, clear scope, debounced destination suggestions, keyboard selection, highlighted matches, recent searches, loading and no-result states, a full results page, and a clear button.A keyboard-accessible shortcut that bypasses repeated navigation and reaches main content.
Create a Skip to main content link immediately after the opening body content, visually hidden until focused, targeting a focusable main region, remaining highly visible on focus, and working before every repeated navigation block.In-page navigation that highlights the section currently visible while scrolling.
Create accessible scrollspy navigation that links to real heading anchors, updates the visual active section without stealing focus, uses aria-current carefully, handles short and overlapping sections, respects sticky-header offsets, and works without JavaScript.Navigation that changes presentation across available screen sizes while keeping destinations stable.
Create responsive navigation that changes from a labelled horizontal layout to a clearly triggered mobile panel, preserves destination order and current state, avoids duplicate focusable links, supports zoom and reflow, and restores focus when the panel closes.Navigation that remains available at a viewport edge while content scrolls.
Create sticky navigation that remains compact while scrolling, never obscures focused content or anchor targets, accounts for safe areas and zoom, preserves visible focus, avoids layout jumps, and becomes static when limited viewport height makes it intrusive.Previous, next, and position controls for navigating a set of slides.
Create accessible carousel navigation with labelled previous and next buttons, understandable slide position, optional direct slide controls, keyboard operation, pause controls for autoplay, reduced-motion support, and announcements that avoid excessive interruption.