Meowland docs
Workbench

Component reference

RailSection

A group of related destinations that folds into one shortcut icon when the rail is collapsed.

Preview

RailSection has no story of its own; this one draws it as part of IconRail.

Expansion and item states

Provides only sample items and groups; does not simulate Meowland navigation or content pages.

packages/meowtail/stories/icon-rail.stories.tsxline 15tsx
render: () => (
  <SchemePair width={320}>
    {(scheme) => (
      <div style={{ position: "relative", minHeight: "300px" }}>
        <IconRail label={`Sample icon rail ${scheme}`}>
          <RailItem href="#first" current icon={<Icon name="folder" />} label="Current item" />
          <RailItem
            href="#second"
            dot="warning"
            icon={<Icon name="file" />}
            label="Item with reminder"
          />
          <RailSection label="Sample group" icon={<Icon name="folder" />} href="#group">
            <RailItem href="#child" icon={<Icon name="file" />} label="Group item" />
          </RailSection>
        </IconRail>
      </div>
    )}
  </SchemePair>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx
import { RailSection } from "meowtail";

<RailSection label="Sample group" icon={<Icon name="folder" />} href="#group">
  <RailItem href="#child" icon={<Icon name="file" />} label="Group item" />
</RailSection>

API reference

The shortcut shows the current location and the attention dot of whichever child has them.

Props

PropTypeDefault
labelRequiredEyebrow shown while the rail is expanded, for example "Expanded".
string–
iconRequiredWhile collapsed, the whole section is this one icon, pointing at href.
Child–
hrefRequired
string–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootheadingitemsshortcut

Registry

The component is registered as rail-section in the meowtail component registry.