Use Nav's collapsed, expandOnHover and expandedWidth props to build an editor-style icon rail that opens over the page instead of showing a tooltip per icon.
Since 2.6, Nav can collapse to one column of icons and open over the page on hover, so an editor sidebar doesn't need a tooltip on every icon.
Why icon rails usually feel cheap
Editors and dense apps keep only the icons in the sidebar to give the canvas room. The usual fix for "what does this icon do" is a tooltip per icon. It works, but you read one label at a time, and next to native apps it feels second-rate.@once-ui-system/core 2.6 makes the rail a Nav feature instead. You don't compose it by hand, and you don't add tooltips.
Collapse the Nav
Set collapsed and the Nav narrows to a single icon column. Labels, badges and section headings fade out, and any NavGroup closes (it reopens when the rail expands). Every row still answers to its label for a screen reader, so nothing is lost for keyboard and assistive tech users.The collapsed width follows the density: 64px for normal and spacious, 36px for compact, plus the padding you give the Nav.
Open it over the page
Add expandOnHover and the rail opens, labels and all, when a mouse rests on it or keyboard focus moves into it. Escape or moving focus away closes it. Touch never opens it, and reduced motion drops the animation.The important part is that it keeps its collapsed width in the layout. It widens over the content beside it rather than pushing it, so your panel never jumps. expandedWidth sets how wide it opens, in rem or a spacing token, and defaults to 16.
If you want a button that toggles the rail instead of hover, leave out expandOnHover. Then collapsed is a static icon rail and you flip it from your own state.
Two things that trip people up
Clipping. The open rail sits above whatever follows it. If an ancestor clips overflow, for example a sidebar Column with overflowY="auto", the open rail gets cut off at that edge. Keep the Nav outside it.
Missing icons. A collapsed row is just its icon. Give every NavItem an icon, or that row shows as an empty pill.
Write this / not this
Do
Avoid
`<Nav collapsed expandOnHover>`
A narrow `Column` of `IconButton`s
A `label` on every `NavItem`
A `Tooltip` wrapped around each icon
The `Nav` outside scrolling containers
A rail inside `overflowY="auto"`
Reference
The Nav page in the Once UI docs has a live example of the rail and the full prop list.
