Component reference
IconRail
A narrow icon column that expands into a labelled drawer over the page.
Preview
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 { IconRail } from "meowtail";
<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>API reference
The column keeps its width in the layout, so expanding never reflows the content beside it.
Props
| Prop | Type | Default |
|---|---|---|
labelRequiredAccessible name of the navigation. | string | – |
brand | Child | – |
footerPinned to the bottom, for example settings. | Child | – |
expandedKeep the drawer open; by default it expands over the page on hover or keyboard focus. | MaybeSignal<boolean> | false |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootdrawerbranditemsfooter
Registry
The component is registered as icon-rail in the meowtail component registry.