Skip to main content

Widgets: Navigation And Workflow

Use these widgets when the user needs to move between sections, search, execute commands, or drive a workflow-heavy surface.

Section and route navigation

WidgetUse it forCapabilitiesGood example
Tabssmall view switchingnamed tab strips, keyboard tab changes, pointer selectionWorkspaceApp
Breadcrumblocation path displaydrill-down path with clickable segmentsrecord/detail flows
SideNavRailleft-rail navigationicons, badges, selection, activationWorkspaceApp, DataWorkbench
JumpListsection or target jumpingfast jump targets with activation eventscommand and review flows
Accordioncollapsible section stacksexpand/collapse grouped contentsettings and detail panels
Paginatorpage movementcompact page navigation for paged resultspaged tables and lists

Command and search widgets

WidgetUse it forCapabilitiesGood example
CommandPaletteglobal command launchsearchable command execution overlayGitConsole style flows
QuickOpenOverlayfuzzy-open style jumpingsearch and jump into entities/files/itemsworkspace shells
SearchBoxinline query entryquery text, match metadata, prev/next navigationsearch-heavy screens
SearchResultsViewresult listing for a queryfocused result browsing after searchsearch workflows
FuzzyFinderstandalone fuzzy selectionstring or item-based fuzzy findingadvanced open/go-to flows
WidgetUse it forCapabilitiesGood example
MenuBarapplication-wide menustop-level menu items and submenu launchingshell-style apps
Toolbarcompact tool rowsvisible tool items with selection changesproductivity shells
CommandBarvisible command/action rowsfocused action strips and item activationcommand-heavy apps

Lists and tree widgets

WidgetUse it forCapabilitiesGood example
ListView<T>straightforward list browsingsimple typed item lists with selectionstarters and detail panes
VirtualizedListView<T>larger listsreduced rendering cost for long listslarge feeds and records
GroupedListView<TGroup,TItem>grouped listsgrouped headers + item selectioninboxes and grouped queues
TreeViewhierarchical navigationnative tree interaction with expand/collapsesettings and file-like hierarchies
FileExplorerfile/folder navigationdirectory tree browsing with file itemsadvanced tooling flows

Workflow-specific boards and flows

WidgetUse it forCapabilitiesGood example
KanbanBoardqueue-and-lane workflowlanes, cards, selection, movement-oriented boardsplanning and ops queues
Steppershort process stagescompact sequence markerguided tasks
Wizardlonger guided task flowstep descriptions and completion statesetup and handoff flows