Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Side rails
Three lookalike rails that are not interchangeable: an application menu, the index of a long page, and a listing filter.
Application menu
It answers "where can I go". Collapsed, only the icons are left - which is why an item with no icon is unreadable in exactly the state where the icon is the only visible thing.
Collapsing is a prop with an event and not internal state: the screen around it owns the layout, and a menu that decided its own width would fight the grid.
<sidebar-panel v-model:collapsed="collapsed" :groups="GROUPS" />
Long-page index
It answers "where am I". The active item follows the scroll - on a page of twenty sections, an index that does not say where the reader is answers half the question.
Introduction
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Installation
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Tokens
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Themes
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
Sample text, to give the page height: the index beside it only shows what it does when there is enough scrolling for it to follow.
<sidebar-docs :groups="NAV" content-selector="#guide" />
Listing filters
It answers "what do I want to see". The state belongs to the caller and has to become a URL: a listing filtered only in memory cannot be shared or reloaded.
What comes out of it
{
"kind": [
"article"
]
}<sidebar-filters v-model="selected" :groups="FILTERS" />
For AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/sidebars.md