Responsive Navbar
Brand, links and CTAs with a mobile panel that unmounts when closed — so its links are never tabbable while invisible — plus escape-to-close and focus return.
Your page content goes here
Top bars, mega menus, mobile drawers and app sidebars.
A navbar has to survive three widths, a logged-in state and a scroll. These cover the marketing bar with a mega menu, the app bar with a workspace switcher, and the mobile drawer — which is a separate component rather than the same one squashed, because a hamburger that opens a desktop menu at phone width is how sites end up with unreachable links.
Brand, links and CTAs with a mobile panel that unmounts when closed — so its links are never tabbable while invisible — plus escape-to-close and focus return.
Brand header, search trigger, labelled link groups and a user row, with each group announced as a list and the active link marked aria-current.
Folds between a full list and an icon rail without losing any accessible names, with a Ctrl/Cmd+B shortcut and tooltips that show on keyboard focus too.
A header that opens a real menu of workspaces: arrow keys, Home/End, Escape returning focus to the trigger, and checked state announced as a radio choice.
Conversations grouped by recency with a per-row pin toggle that announces itself, and a hover control that stays reachable by keyboard and on touch.
A real ARIA tree with roving focus, arrow-key expand and collapse, type-ahead and one tab stop, drawn flat so a screen reader is told the structure.
Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.
The field in the header, not the palette over it: Enter searches for what you typed unless you arrowed to a suggestion, late responses are dropped by sequence number, and recent searches are removable one at a time.
Category, size, colour and price facets as proper fieldsets, with colour swatches that carry their name as well as their hue.
Top-level items that open a described-link panel, opening on hover and focus, closing on escape, outside click and focus leaving the group — and collapsing to an accordion on mobile.
A slide-in site menu that behaves like a dialog: focus trap, focus restoration, body scroll lock and a transition that drops under prefers-reduced-motion.
Kicker, headline, standfirst, byline and share row, with the opening prose and a pull quote included — the type scale of a post, decided once instead of per-article.
Groups that fold open to child pages, starting with the group that owns the current page already open and every aria-controls resolving.
A floating card on a tinted canvas beside an inset content surface, with a labelled usage meter and an upgrade card that is one skippable Tab stop.
A drag handle that is also a keyboard-operable separator, with arrow keys that swap in RTL, pointer capture for touch and pen, and double-click to reset.
Version picker, a labelled filter that announces its match count, and sections that vanish rather than leave a heading over an empty list.
Compose button, folders whose unread counts are spoken, colour labels that never rely on colour alone, and a storage meter with a text warning.
Breadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.
The "/" menu inside a document: focus never leaves the editor, every row names what it acts on, and Escape cleans up the trigger text it inserted instead of leaving you to backspace it.
The actions offered on a selection, each saying whether it rewrites in place or opens a draft beside it.
A restaurant menu typeset as a bill of fare rather than a product grid — dotted leaders to the price, dietary marks as abbreviations with a key, and prices as strings so “market price” still fits.
The bar above an app rather than a site: workspace and environment named in the open, a bell that counts in words, and an impersonation strip that cannot be dismissed.
A narrow rail of labelled sections beside a panel that lists the pages inside the chosen one, for products with more destinations than one list can hold.
Sidebar, article and on-this-page rail — each column answers a different question, and they collapse on mobile in the order that keeps the article alive.
Showing 24 of 38. Search the rest →
The full bill of fare, typeset with leaders and dietary marks, split into food and drink because a diner reads the two differently. No photography, deliberately.
The furniture that is on every screen and belongs to none — navbar, mobile drawer, command palette, shortcut sheet, header search, scope switcher, and the two shapes a detail view takes without losing the list.
Hours, address and phone as a first-class section directly under the hero, then the menu — the two jobs a restaurant site has, in the order visitors actually need them.
A complete marketing page in the order that actually converts — hook, proof, substance, price, objections, exit. Twelve blocks, navbar and footer included.
The site navbar over the three-column docs frame. In your project this is one catch-all route — the slug picks the article, the frame never changes.
The screen an app opens on: shell, header, KPI row, chart and activity feed — numbers first, shape second, changes last.
An action menu with the menu keyboard model in full: arrows, Home/End, typeahead, and Escape that returns focus to the trigger rather than dropping it on the page body. Its limits — no collision flip, no portal — are stated in the header.
One tab stop for the whole tree, with the ARIA tree keyboard contract in full — including typeahead and the arrow keys mapped through the reading direction.
The trail back up, with the current page as text rather than a link to itself, and a long middle that collapses to a button that announces what it hides and hands focus to the first revealed crumb.
An ordered list in a nav, not a row of divs — so the count and the position come free, and aria-current names the step you are on. Horizontal and vertical, because four labels do not fit on a phone.
One tab stop for the whole list, arrow keys mapped through the reading direction, and a manual-activation mode so arrowing past five expensive panels does not fire four requests nobody asked for.
Buttons inside real headings, with panels that stay mounted so aria-controls resolves and go inert when shut so Tab cannot walk into invisible content — animated by a grid-row transition, off under reduced motion.
Navigation bars, mega menus, context menus and flyouts.
Reveal-on-scroll, parallax, sticky stacks and progress bars.
Mega footers, minimal bars, newsletter and sitemap columns.
Storefronts, product pages, cart and checkout as whole screens.
App shells with navigation, tables, settings and detail screens.
Sortable grids, bulk selection, filters, pagination and row actions.