Icon-Only Sidebar
Icon-Only Layout — Rail sidebar
76px, labels hidden, hover tooltips
What is the Icon-Only layout?
The sidebar collapses to a narrow icon rail (76px) with all text labels hidden. Navigation is done entirely through icons. Hovering an icon shows a tooltip label. This layout maximises horizontal space for the content area and is popular in design tools and code editors.
Mechanism:
is-collapsed
class pre-applied to .app-shell on page load
Sidebar width: 76px (CSS variable
--sidebar-rail-w)
Labels: Hidden via
overflow:hidden; width:0 on
.nav-menu__label
Tooltips: Pure CSS
::after pseudo-element on
data-tip attribute
Icon Rail Preview
This is how the sidebar rail looks at 76px width. Hover icons below to see the tooltip effect.
How it works
-
The
.app-shellgetsis-collapsedclass via JS on page load - The hamburger toggle is hidden so users can't accidentally expand the sidebar
-
Hover tooltips use CSS
::afterpseudo-elements targetingdata-tip - On mobile the sidebar becomes an off-canvas drawer (normal behaviour)
- Submenus fly out as panels at the side of the rail
$284K
Total Revenue
1,842
Customers
5,219
Orders
3.42%
Conversion
All Layout Variants
Browse the full layout collection.