navigation

The persistent bar across the top of an application carrying its title, navigation, and primary actions.

A bar of three to five top level destinations pinned to the bottom edge of a phone screen, with the current destination always marked.

A trail of links showing the path from the top of a hierarchy down to the current page, with every level above it clickable on the way back up.

A panel docked to one edge of the screen that slides in over the content, holding navigation or the details of the thing you selected.

A button of three stacked horizontal lines that opens a site's main navigation, usually in a panel over the page.

A control that navigates somewhere, named for its destination, and carrying the browser affordances of a destination (open in new tab, copy address).

A large navigation panel that drops from a top level item and shows many links at once, grouped into columns with headings.

A permanent horizontal row of menu titles (File, Edit, View) whose menus open on click and then follow the pointer along the row.

A shrunken overview of a long document or canvas beside the scrollbar, with a box showing which part is currently on screen.

The horizontal strip of primary destinations across the top of a site, usually holding the logo, the main sections and an account control.

A menu of destinations rather than commands, where opening an item moves you somewhere instead of running an action.

A narrow vertical strip of top level destinations at the side of a screen, used at medium widths where a bottom bar is wasteful and a drawer is too heavy.

The row of small dots under a carousel or onboarding screen showing how many pages there are and which one you are on.

The numbered row of page links under a long result set, with previous and next controls and usually an ellipsis where numbers are skipped.

A set of labelled panels in one region, where selecting a label swaps the panel beneath it.

A nested list where branches expand and collapse in place, navigated with arrow keys as a single tab stop.

A horizontally scrolling row of cards, one row per category, stacked down the page so each row is browsed sideways.

The links to the top tier of a site's structure, present on every page and unchanged wherever the reader currently is.

A browsable list paired with a pane showing the selected item in full, collapsing to one screen at a time when the window is narrow.

Links contextual to where the reader is, showing the siblings and children of the current page rather than the whole site.

A browsing layout of side-by-side columns where selecting an item in one column fills the next with its children, keeping the whole path visible.

Keeping secondary regions parked outside the viewport and sliding them in on demand, instead of stacking them below the main content.

A persistent vertical region alongside the main content holding navigation or secondary controls, often collapsible on narrow screens.

The closing region of a site holding secondary navigation, legal links, and contact details that do not deserve top level placement.

A slim bar that links a subsite back to its parent organisation's other sites, sitting above the subsite's own global navigation.

The strip of secondary tools and account actions, sign in, search, language, cart, kept apart from the links that describe the site's content.

A control that appears after the reader has scrolled some distance and returns them to the top of the page in one action.

Paging that moves by a pointer into the result set rather than a page number, so newly inserted rows never shift what the next page contains.

Going deeper into a hierarchy one level at a time inside the same panel, each level replacing the last and offering a way back up.

A navigation shape where every task is reached from one home screen and returns to it, with no way to move sideways between tasks.

A button at the end of a list that fetches and appends the next batch only when pressed, keeping the reader in control of how much arrives.

A horizontal menu that keeps as many items visible as fit and moves the rest into a More control, recalculating whenever the available width changes.

Navigation that watches the scroll position and highlights the entry for the section currently in view.

A list of a document's sections, linked in reading order, shown beside or above the text.

A swipe that begins off the screen edge and travels inward, reserved by the system for navigation such as going back or revealing a drawer.

Motion that covers a navigation between two whole pages or routes, replacing the hard cut a document load would otherwise produce.

A back gesture that reveals the destination underneath while the finger is still down, so the swipe can be finished or abandoned once the reader has seen where it goes.

A navigation transition where the new view slides in and pushes the old one off, and reversing it pops back, encoding depth in a stack.

Material's transition where outgoing and incoming views slide and fade along the same x, y, or z axis, so direction encodes the navigational relationship.

A transition where content translates in or out along one axis, using direction to say whether the user moved forward, back, up, or down.

A single underline or pill that travels between tabs to mark the selection instead of each tab drawing its own, so the move itself says which way the selection went.

An animated change between two states of a page, where the browser photographs before and after and interpolates the elements the two have in common.

A presentation that scales a tapped element up into the full view it opens, so the destination appears to come from the thing that was touched.

The marking of which item in a navigation set is the one you are on, exposed with aria-current so it survives without the colour cue.

A named region role (banner, navigation, main, complementary, contentinfo, search) that lets assistive technology jump between the major parts of a page.

The document title, the first thing a screen reader speaks and the only label a reader has when picking between tabs, windows, and history entries.

Telling assistive technology that a client side navigation happened, by moving focus to the new heading or posting the new title to a live region.

A link at the very start of a page, revealed on focus, that jumps past repeated navigation to the main content.

Moving focus by direction rather than by sequence, so arrow keys, a D-pad, or a TV remote jump to the nearest control up, down, left, or right.