Teseor CSS

v2.5.2

  • Home
Guides
  • Getting Started
  • Theming
  • Token Architecture
  • Accessibility
Foundation
  • Colors
  • Design Tokens
  • Grid System
  • Root
  • Spacing
  • Typography
Layout
  • Aspect Ratio
  • Box
  • Center
  • Column
  • Container
  • Content
  • Footer
  • Grid
  • Layout
  • Main
  • Nav Rail
  • Page Header
  • Row
  • Sidebar
  • Sidebar Nav
  • Topbar
Components
  • Actions
    • Button
  • Forms
    • Checkbox
    • Field
    • Fieldset
    • Form
    • Form Error
    • Form Helper
    • Input
    • Label
    • Number Input
    • Password Input
    • Radio
    • Search Input
    • Select
    • Slider
    • Textarea
    • Toggle
  • Data Display
    • Avatar
    • Badge
    • Card
    • Data List
    • Icon
    • Image
    • Stat
    • Status
    • Table
    • Tag
  • Feedback
    • Alert
    • Progress
    • Skeleton
    • Spinner
    • Toast
  • Navigation
    • Breadcrumb
    • Dropdown Menu
    • Menu
    • Nav
    • Pagination
    • Tabs
  • Overlays
    • Dialog
    • Drawer
    • Modal
    • Overlay
    • Popover
    • Tooltip
  • Disclosure
    • Accordion
    • Disclosure
  • Content
    • Divider
    • Scroll Area
    • Spacer
Typography
  • Blockquote
  • Code
  • Heading
  • Kbd
  • Link
  • List
  • Mark
Utilities
  • Container
  • Debug
  • Display
  • Position
  • Scroll Animation
  • Scroll Snap
  • Spacing
  • Text
  • View Transition
  • Visually Hidden

Nav Rail

Narrow fixed vertical navigation rail for icon-based navigation with bottom actions.

Default

Base

ClassDescription
.ui-nav-railBase class

End

ClassDescription
.ui-nav-rail--endend

Override these CSS custom properties to customize the component.

TokenDefaultDescription
--ui-nav-rail-width var(--ui-row-4) Overall width
--ui-nav-rail-bg var(--ui-color-bg-subtle) Background color
--ui-nav-rail-border-color var(--ui-color-border) Border color
--ui-nav-rail-gap var(--ui-space-1) Gap between children
--ui-nav-rail-z var(--ui-z-index-sticky) Z-index stacking order

End Position

<!-- Rail on the end (right in LTR) side. -->
<nav class="ui-nav-rail ui-nav-rail--end">
  <div class="ui-nav-rail__items">
    <!-- icon buttons -->
  </div>
  <div class="ui-nav-rail__actions">
    <!-- settings, profile -->
  </div>
</nav>

With Topbar

App
<!-- Nav rail respects --topbar-height, offsetting below the topbar. -->
<body class="ui-app-shell" style="--topbar-height: var(--ui-row-3)">
  <header class="ui-topbar ui-topbar--fixed ui-topbar--bordered">
    <div class="ui-topbar__start"><strong>App</strong></div>
  </header>
  <nav class="ui-nav-rail">
    <div class="ui-nav-rail__items"><!-- icons --></div>
  </nav>
</body>