HTML / CSS / JavaScript

Navigation and Menus

Primary navigation, pagination, tabs, trees, and command-style navigation.

73category cases
Currently showing 73 cases
0008Navigation and Menus

Dropdown Navigation Menu

Responsive navigation that balances desktop hover and mobile tap interactions.

HTMLCSSJavaScriptNavigation
Open and run
0023Navigation and Menus

Museum Guide Responsive Main Menu

Responsive main menu completed in a museum guide setting: includes real content, interactive controls, clear status feedback, and a responsive layout.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0039Navigation and Menus

Museum Guide Breadcrumb Navigation

Complete the breadcrumb navigation in the museum guide scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0055Navigation and Menus

Museum Guide Workspace Tabs

Complete workspace tabs in a museum guide scenario: includes realistic content, actionable controls, clear status feedback, and cross-size layouts.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0071Navigation and Menus

Museum Guide Command Palette

Complete the command palette for a museum tour scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0087Navigation and Menus

Museum Guide Tree Navigation

Build tree navigation for museum guide scenarios: includes real content, interactive controls, clear status feedback, and layouts across sizes.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0103Navigation and Menus

Museum Tour Flow Progress Navigation

Complete progress navigation in a museum guide scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0119Navigation and Menus

Museum guide bottom quick navigation

Complete bottom quick navigation for a museum guide scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0135Navigation and Menus

Museum guide section-based navigation

Complete section-spy navigation in a museum guide scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0151Navigation and Menus

Museum Guide Page Navigation

Complete page navigation in a museum guide scenario: real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0167Navigation and Menus

Museum Guide Group Mega Menu

Create a grouped mega menu for a museum guide scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0183Navigation and Menus

Responsive Main Menu for Knowledge Base

Complete a responsive top menu in a knowledge base scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0199Navigation and Menus

Knowledge Base Breadcrumb Navigation

Complete a breadcrumb navigation in a knowledge base scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0215Navigation and Menus

Knowledge Base Workspace Tabs

Complete workspace tabs in a knowledge base scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0231Navigation and Menus

Knowledge Base Command Palette

Complete a command palette in a knowledge base scenario: includes real content, interactive controls, clear state feedback, and a cross-size layout.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0247Navigation and Menus

Knowledge Base Tree Navigation

Complete tree navigation in a knowledge base scenario: include real content, actionable controls, clear state feedback, and cross-size layouts.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0263Navigation and Menus

Knowledge Base Progress Navigation

Complete a process progress navigation in a knowledge base scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0279Navigation and Menus

Knowledge Base Bottom Quick Navigation

Complete the bottom quick navigation for a knowledge base scenario: include real content, interactive controls, clear status feedback, and a responsive layout.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0295Navigation and Menus

Knowledge base section-scoped navigation

Complete section navigation in a knowledge base scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0311Navigation and Menus

Knowledge Base Pagination Navigation

Complete page navigation in a knowledge base scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0327Navigation and Menus

Knowledge Base Grouped Mega Menu

Complete a grouped mega menu for the knowledge base scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0343Navigation and Menus

Project space responsive main menu

Complete a responsive primary menu for a project space scenario: include realistic content, actionable controls, clear status feedback, and cross-size layout.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0358Navigation and Menus

Project Space Breadcrumb Navigation

Complete breadcrumb navigation in a project space scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0373Navigation and Menus

Project Space Workspace Tabs

Complete the workspace tabs in the project space scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0388Navigation and Menus

Project Space Command Palette

Complete a command palette for a project space scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0403Navigation and Menus

Project Space Tree Navigation

Complete tree navigation in a project space scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0416Navigation and Menus

Project Space Flow Progress Navigation

Complete a process progress navigation in a project space scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0429Navigation and Menus

Project Space Bottom Quick Navigation

Complete a bottom quick navigation for a project space scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0442Navigation and Menus

Project Space Section Spy Navigation

Complete chapter-location navigation in a project space scenario: include real content, interactive controls, clear status feedback, and layouts across sizes.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0455Navigation and Menus

Project Space Page Navigation

Complete numbered-page navigation for a project space scenario: include real content, operable controls, clear state feedback, and a responsive layout across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0465Navigation and Menus

Project Space Group Mega Menu

Complete the grouped mega menu for a project space scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0524Navigation and Menus

Support Center Bottom Quick Navigation

Complete bottom quick navigation in a support center scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0540Navigation and Menus

Archive Center Breadcrumb Navigation

Complete a breadcrumb navigation flow in an archive center scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0549Navigation and Menus

Archive Hall command palette

Complete the command palette in an archive hall setting: include real content, interactive controls, clear state feedback, and cross-size layouts.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0565Navigation and Menus

Campus Tour Group Mega Menu

Complete a grouped mega menu in a campus guide scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0574Navigation and Menus

Archive Dispatch Desk Pagination Navigation

Complete paginated navigation in an archive dispatch desk scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0590Navigation and Menus

Archive guide wall flow progress navigation

Complete the process progress navigation in an archive guide wall scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0599Navigation and Menus

Archive Notice Board Responsive Main Menu

Complete a responsive main menu in the archive notice board scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0615Navigation and Menus

Archive quick index section navigation

Complete chapter navigation in an archive quick index scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0624Navigation and Menus

Archive Resource Shelf Tree Navigation

Complete tree navigation in an archive resource shelf scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0640Navigation and Menus

Archive Route Map Workspace Tabs

Complete workspace tabs for an archive route map scenario, with realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0649Navigation and Menus

Bottom quick navigation for the Archive Service Hall

Complete the bottom quick navigation in the archive service hall scenario: it includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0665Navigation and Menus

Archive Access Card Breadcrumb Navigation

Complete a breadcrumb navigation in an archive access card scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0674Navigation and Menus

Campus Dispatch Desk Command Palette

Complete a command palette for a campus dispatch desk scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0690Navigation and Menus

Campus Guide Wall Group Mega Menu

Create a grouped mega menu for a campus guide wall scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0699Navigation and Menus

Campus Map Numbered Pages Navigation

Complete page navigation in a campus map scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0715Navigation and Menus

Campus Notice Board Progress Navigation

Complete a process-progress navigation for a campus notice board scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0724Navigation and Menus

Campus quick index responsive main menu

Create a responsive primary menu for the campus quick index scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0740Navigation and Menus

Campus Resource Shelf Section Spy Navigation

Complete chapter navigation for the campus resource shelf scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0749Navigation and Menus

Campus Route Map Tree Navigation

Complete tree navigation in the campus route map scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0765Navigation and Menus

Campus Service Hall Workspace Tabs

Complete workspace tabs for the campus service hall scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0774Navigation and Menus

Campus Visit Pass Bottom Dock Navigation

Complete a bottom quick navigation in a campus visit pass scenario: includes real content, actionable controls, clear status feedback, and responsive layout.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0790Navigation and Menus

Care Route Breadcrumb Navigation

Complete breadcrumb navigation for a care-path scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0799Navigation and Menus

City Services Command Palette

Complete a command palette in a city services scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0815Navigation and Menus

Course Portal Mega Menu Group

Create a grouped mega menu for the course portal scenario: including real content, interactive controls, clear state feedback, and responsive layouts.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0824Navigation and Menus

Outpatient Dispatch Desk Page Navigation

Complete page navigation in a clinic dispatch desk scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0840Navigation and Menus

Outpatient Guide Wall process progress navigation

Complete a progress navigation flow in a clinic guide wall scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0849Navigation and Menus

Clinic Terminal Responsive Main Menu

Complete a responsive main menu for the outpatient terminal scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0865Navigation and Menus

Section-spy navigation for the clinic notice board

Complete section-linked navigation in a clinic announcement board scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0874Navigation and Menus

Clinic Quick Index Tree Navigation

Complete tree navigation in a clinic quick-index scenario: includes real content, actionable controls, clear state feedback, and multi-size layout.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0890Navigation and Menus

Outpatient Resource Shelf Workspace Tabs

Complete workspace tabs in the clinic resource shelf scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0899Navigation and Menus

Outpatient Route Map Bottom Quick Navigation

Complete a bottom quick-navigation pattern for an outpatient route map scenario, including real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0915Navigation and Menus

Clinic Service Hall Breadcrumb Navigation

Complete breadcrumb navigation in a clinic service hall scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0924Navigation and Menus

Clinic Visit Card Command Palette

Complete a command palette in a clinic visit pass scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across screen sizes.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0940Navigation and Menus

Creator workspace grouped mega menu

Complete a grouped mega menu for the creator workspace scenario: it includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0949Navigation and Menus

Event Hub Numbered Page Navigation

Complete numbered-page navigation for an events-hub scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0965Navigation and Menus

Fleet Operations Hub Progress Navigation

Complete the process progress navigation in a fleet control center scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0974Navigation and Menus

Responsive Main Menu for Makers’ Workbench

Complete a responsive main menu in the maker workbench scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0990Navigation and Menus

Maker Forum section-spy navigation

Section-based navigation completed in a maker forum scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0999Navigation and Menus

Media Room Tree Navigation

Complete a tree navigation in a media room scenario: includes real content, interactive controls, clear state feedback, and a responsive layout.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
1015Navigation and Menus

Rehearsal Script Workspace Tabs

Complete a workspace tabs example for rehearsal cue scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
1024Navigation and Menus

Service Plaza Bottom Quick Navigation

Complete a bottom quick navigation flow for the service plaza scenario: include realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
1040Navigation and Menus

Studio Dispatch Desk Breadcrumb Navigation

Complete the breadcrumb navigation for a studio dispatch desk scenario: including realistic content, actionable controls, clear state feedback, and a responsive layout.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run