Component

Rail

Render vertical navigation lists for sidebars, filters, and secondary sections.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Rail } from "@chitrank2050/monoline-ui/rail"

Basic usage

<Rail title="Filter by topic">
  <Rail.Item active>
    <span>All posts</span>
    <Rail.Count>7</Rail.Count>
  </Rail.Item>
  <Rail.Item>
    <span>Backend</span>
    <Rail.Count>3</Rail.Count>
  </Rail.Item>
</Rail>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Rail works for a compact vertical list with an optional title, active marker, and item counts.

Avoid when

It acts as navigation but its items are not real links or it lacks a surrounding navigation landmark.

Accessibility

Rail contains a ul and li elements inside a div. Its active dot is decorative, so text or link semantics must also communicate the active state.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

titleReactNodeSection label rendered above the list in mono uppercase

activeboolean (Rail.Item)Marks the item as the active selection - bold label + accent dot

childrenReactNodeItem content; pass Rail.Count as the second child for a numeric badge

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varActive dot color

--text-mutedCSS varInactive dot and count color

Implementation

The source used by the example above, including any state it needs.

import { Rail } from "@chitrank2050/monoline-ui/rail"

export function TopicFilter() {
  return (
    <Rail title="Filter by topic">
      <Rail.Item active>
        <span>All posts</span>
        <Rail.Count>7</Rail.Count>
      </Rail.Item>
      <Rail.Item>
        <span>Backend</span>
        <Rail.Count>3</Rail.Count>
      </Rail.Item>
      <Rail.Item>
        <span>Architecture</span>
        <Rail.Count>2</Rail.Count>
      </Rail.Item>
      <Rail.Item>
        <span>Open Source</span>
        <Rail.Count>1</Rail.Count>
      </Rail.Item>
    </Rail>
  )
}

Compare related components or review the package and theme setup.

01ComponentLink ListComponent · ReferenceReference→02ComponentTocComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview