Component reference

NavItem

One navigation entry: an icon, a label and an optional badge, marked when it is the current location.

Preview

Selected, disabled, and long labels

Selection is driven by local gallery props; no business page is switched.

packages/meowtail/stories/navigation.stories.tsxline 13tsx

render() {
  const active = signal("first");
  return (
    <Stack>
      {mapSignal(active, (value) => (
        <NavItem
          label="Sample item"
          icon={<Icon name="file" />}
          badge={<Badge size="small">3</Badge>}
          active={value === "first"}
          onClick={() => {
            active.value = "first";
          }}
        />
      ))}
      {mapSignal(active, (value) => (
        <NavItem
          label="A longer navigation item label to observe wrapping behavior"
          active={value === "second"}
          onClick={() => {
            active.value = "second";
          }}
        />
      ))}
      <NavItem label="Disabled item" icon={<Icon name="folder" />} disabled />
    </Stack>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { NavItem } from "meowtail";

<NavItem
  label="Sample item"
  icon={<Icon name="file" />}
  badge={<Badge size="small">3</Badge>}
  active={value === "first"}
  onClick={() => {
    active.value = "first";
  }}
/>

Examples

The other stories that show this component.

Long file names and metadata

File names wrap naturally and sizes keep their own position; selected and disabled states use the same navigation component.

packages/meowtail/stories/navigation.stories.tsxline 52tsx

render() {
  const selected = signal("long");
  return (
    <Stack style={{ width: "min(100%, 240px)" }} gap="compact">
      <NavItem
        label="long-component-layout-review-and-source-reference.test.tsx"
        icon={<Icon name="file" />}
        badge="24.5 KB"
        active={mapSignal(selected, (value) => value === "long")}
        onClick={() => {
          selected.value = "long";
        }}
      />
      <NavItem
        label="README.md"
        icon={<Icon name="file" />}
        badge="1.2 KB"
        active={mapSignal(selected, (value) => value === "readme")}
        onClick={() => {
          selected.value = "readme";
        }}
      />
      <NavItem
        label="unreadable-long-name-sample-file-with-unavailable-content.txt"
        badge="Unknown"
        disabled
      />
    </Stack>
  );
}

API reference

Props

Prop	Type	Default
`label`Required	`Child`	–
`icon`	`Child`	–
`badge`	`Child`	–
`active`	`MaybeSignal<boolean>`	`false`

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

DOM parts

rooticonlabelbadge

Registry

The component is registered as nav-item in the meowtail component registry.