Overlays and navigation
This widget family covers two closely related jobs.
First, it covers layered interface that should appear above the main layout flow, such as modals, popovers, menus, tooltips, and toasts.
Second, it covers the widgets that help users move through app structure, such as tabs, accordions, breadcrumbs, pagination, routing, and transition-oriented navigation helpers.
These widgets matter in Fission because they rely on runtime-owned portal, focus, or routing behavior rather than being simple inline content.
Overlay and portal-oriented widgets
| Widget | Dedicated page | When to choose it |
|---|---|---|
Modal | Modal | A blocking dialog should appear above the main interface |
ModalAction | ModalAction | Supporting action definition for modal footers |
Popover | Popover | A panel should anchor to another element |
Drawer | Drawer | A larger side panel should slide in |
DrawerSide | DrawerSide | Supporting type for drawer placement |
Tooltip | Tooltip | Small explanatory overlay on hover or focus |
Toast | Toast | Temporary notification overlay |
ToastKind | ToastKind | Supporting toast style type |
Portal | Portal | Low-level portal registration widget |
flyout(...) | flyout | Flyout helper for layered overlay composition |
Menu | Menu | Menu surface |
MenuButton | MenuButton | Button that opens or owns a menu |
MenuItem | MenuItem | One menu entry |
Navigation and route structure widgets
| Widget | Dedicated page | When to choose it |
|---|---|---|
Tabs | Tabs | Peer sections should switch in the same area |
TabItem | TabItem | Supporting tab definition |
Accordion | Accordion | Sections should expand and collapse in place |
AccordionItem | AccordionItem | Supporting accordion entry |
Breadcrumb | Breadcrumb | Show hierarchical navigation path |
BreadcrumbItem | BreadcrumbItem | Supporting breadcrumb entry |
Pagination | Pagination | Move through paged content |
Route | Route | Define one route mapping |
RouteParams | RouteParams | Access parsed route parameters |
Router | Router | Choose which routed content should build |
Transition and navigation-adjacent helpers
| Widget | Dedicated page | When to choose it |
|---|---|---|
Hero | Hero | Shared-element transition between states or routes |
Transition | Transition | Animated transition wrapper |
FocusScope | FocusScope | Keep focus behavior bounded within a region |
Practical cross-reference
If the next question is about the runtime portal and animation contracts behind these widgets, continue to Animations, portals, and media. For the higher-level teaching explanation, see Media, animation, portals, and 3D. For the full widget map, return to the Widget catalog.