Navigation

RTL VerifiedLTR Verified Navigation

Accordion / Disclosure

Native disclosure built on the details element — state is an attribute the browser writes, not a class, and the exclusive group comes from name with no script at all

Beginner Accordion / Disclosure

Code Prompt

RTL VerifiedLTR Verified Navigation

Drilldown Navigation

Levels replace each other instead of stacking — Back returns you to your place

Advanced Navigation patterns

Code Prompt

RTL VerifiedLTR Verified Navigation

Priority Navigation

What does not fit moves into More — moved, not copied, and it comes back

Advanced Navigation patterns

Code Prompt

RTL VerifiedLTR Verified Navigation

Navbar with Account and Alerts

Two separate menus — opening one closes the other

Advanced Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Navbar with Announcement Bar

A promo strip above with a real timer that stays dismissed

Intermediate Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Compact App Bar

The slimmest size, with a project switcher and a command key

Advanced Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Navbar with Breadcrumb

A hierarchical trail whose separators mirror with direction

Beginner Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Centred-Logo Navbar

Logo in the centre with links balanced on both sides

Beginner Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Classic Navbar

Logo, links and one action — the baseline that always works

Beginner Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Navbar with Mega Menu

A multi-column panel that closes on Escape and outside click

Advanced Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Mobile Navbar with Sheet

A hamburger that opens a full sheet and traps focus

Intermediate Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Navbar with Centre Search

The search expands on focus without shifting the layout

Intermediate Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Shrinking Navbar

Starts tall, shrinks on scroll, and restores at the top

Advanced Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Navbar with Secondary Tabs

Two rows: identity above, tabs below with a sliding indicator

Intermediate Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Transparent Navbar that Fills

Transparent over the hero, gains a background on scroll

Intermediate Navbars

Code Prompt

RTL VerifiedLTR Verified Navigation

Infinite Scroll That Ends

An observer that fetches near the edge and stops with an announcement instead of spinning forever

Advanced Pagination

Code Prompt

RTL VerifiedLTR Verified Navigation

Load More with Honest Count

It announces what remains — not what loaded — and retires at the end instead of staying a dead button

Intermediate Pagination

Code Prompt

RTL VerifiedLTR Verified Navigation

Windowed Pagination

A page-number window whose width never changes as the reader moves

Advanced Pagination

Code Prompt

RTL VerifiedLTR Verified Navigation

Popover

A layer anchored to an element that flips and shifts at the edge

Advanced Popover

Code Prompt

RTL VerifiedLTR Verified Navigation

Sidebar with Live Badges

Counters that change and announce themselves to screen readers

Intermediate Sidebars

Code Prompt

RTL VerifiedLTR Verified Navigation

Collapsible Sidebar

Folds into an icon rail and remembers your choice

Intermediate Sidebars

Code Prompt

RTL VerifiedLTR Verified Navigation

Sidebar with Command Palette

Ctrl+K opens a search that jumps anywhere by keyboard alone

Advanced Sidebars

Code Prompt

RTL VerifiedLTR Verified Navigation

Mobile Drawer

Slides from the start edge and traps focus inside

Advanced Sidebars

Code Prompt

RTL VerifiedLTR Verified Navigation

Grouped Sidebar

Group headings separate sections without collapsing

Beginner Sidebars

Code Prompt