Navigation and panel patterns
Shared Tabs Playground
Validate advanced tabs behavior inspired by Quasar, including route-query syncing, overflow arrows, keyboard navigation, and dynamic tab updates.
Core
Basic tabs
Default tab behavior using icons and labels with synchronized panels.
Overflow
Outside, inside, and mobile arrows
When the tab list overflows, navigation arrows appear and support easier scrolling.
Orientation
Vertical tabs
Vertical layout mirrors left-side tab stacks with panel content beside the list.
Compact
Icons-only tabs
Icon-only tab headers preserve full labels for accessibility while maximizing space in compact layouts.
Density
Dense tabs
Compact spacing keeps the same behavior while reducing vertical height.
Styling
Individual colors
Each tab can control active tones and background emphasis independently.
Indicator
Custom indicator
Switch indicator placement or narrow the indicator width to the content.
State hints
Tab notifications
Badges, alert dots, and alert icons indicate updates directly on tab headers.
Layout
Alignment and breakpoint
Tabs can align left, center, right, or justify depending on available width.
Align left
Align center
Align right
Justify
Direction
Horizontal and right-side vertical orientation
Compare standard horizontal tabs with a right-side vertical stack presented in RTL mode.
Horizontal orientation
Vertical tabs on the right (RTL)
Compact options
With dropdown pattern
Demonstrate the compact more entry style used when many actions are grouped.
Embedding
Tabs in toolbar
Use shrink mode to keep tabs compact inside toolbars and action rows.
Runtime updates
Dynamic tab updates
Add and remove tabs dynamically while keeping overflow and panel sync intact.
Panels
Along with tab panels
Tab headers stay in sync with panel content and keyboard-accessible state.
Observer sync
Scrollable spy
One continuous scroll region updates the active tab whenever a section title intersects the observer line.
Starting point
Overview
The first heading anchors the initial active state as soon as the scroll region becomes visible.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget.
Aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero.
Nibh sed pulvinar proin gravida hendrerit lectus a nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget.
Merchandising copy
Catalog
This longer block keeps the catalog tab active until the next title crosses the shared observer line.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget.
Aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero.
Nibh sed pulvinar proin gravida hendrerit lectus a nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget.
Fulfilment details
Delivery
Repeated body copy makes the middle of the scroll region tall enough to verify stable tab handoff while scrolling.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget.
Aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero.
Nibh sed pulvinar proin gravida hendrerit lectus a nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget.
Follow-up
Support
The final heading confirms the spy can settle on the last tab and stay there near the bottom of the container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget.
Aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero.
Nibh sed pulvinar proin gravida hendrerit lectus a nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget.
Route binding
Route-query navigation hooks
Custom navigation handlers support delayed, cancelled, redirected, and direct route transitions.
Route navigation log is ready.