Component reference
RailItem
One destination in an IconRail: an icon alone when collapsed, icon and label when expanded.
Preview
RailItem 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.
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.
import { RailItem } from "meowtail";
<RailItem href="#first" current icon={<Icon name="folder" />} label="Current item" />API reference
Props
| Prop | Type | Default |
|---|---|---|
labelRequired | Child | – |
iconRequired | Child | – |
currentThe current location. Sets aria-current; the accent mark and fill follow it. | boolean | false |
dotQuiet marker on the icon, visible while the rail is collapsed. It is the data-dot attribute on the item, so a host can set or clear it at runtime without re-rendering. | "warning" | "accent" | – |
metaText or count at the end, visible while the rail is expanded: a count, "In progress". | Child | – |
metaTone"accent" marks activity happening now, such as "In progress"; otherwise the meta is a quiet fact. | "accent" | – |
hrefA route renders an anchor; an action renders a button. | string | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rooticondotlabelmeta
Registry
The component is registered as rail-item in the meowtail component registry.