Navigation skills
Menus, tabs, breadcrumbs and links that tell people where they are and where they can go.
12 skills
Skills
Navigation Active Statesby UI Skillbook
Make it unambiguous where the user is, at every level of nested navigation.
Navigation
Siteplane Breadcrumbby UI Skillbook
A row of links tracing the path from the site root to the current page, so people can climb back up.
Siteplane UI
Siteplane Commandby UI Skillbook
A searchable, keyboard-driven list of actions, shown inline in a panel or as a command palette in a dialog.
Siteplane UI
Siteplane Dashboard Shellby UI Skillbook
A responsive app frame that combines the sidebar, a sticky top bar and a scrolling content area.
Siteplane UI
Siteplane Icon Morphsby UI Skillbook
A menu button whose bars morph into an X while its navigation panel is open.
Siteplane UI
Siteplane Navigation Menuby UI Skillbook
A row of site links where some entries open dropdown panels of further destinations.
Siteplane UI
Siteplane Paginationby UI Skillbook
Previous, Next and numbered page links for stepping through a long list or table.
Siteplane UI
Siteplane Resource Listby UI Skillbook
A list of entities with a status indicator, title, description and meta slot. Rows can be links.
Siteplane UI
Siteplane Sidebarby UI Skillbook
Application navigation in a side column that collapses to an icon rail on desktop and becomes a sheet on mobile.
Siteplane UI
Siteplane Stepperby UI Skillbook
An ordered list of steps showing which are done, current, open or blocked, with optional clickable steps.
Siteplane UI
Siteplane Tabsby UI Skillbook
Keyboard-navigable tabs that switch between related panels of content on the same page.
Siteplane UI
Siteplane Toggle Groupby UI Skillbook
Related pressed-state buttons that share one selection, single or multiple, with arrow-key movement.
Siteplane UI