Navigation rail

TS

import { … } from "@fungi.computer/caps/components/navigation-rail";

Hero

TSX

import { NavigationRail } from "@fungi.computer/caps/components/navigation-rail";

export default function Hero() {
  return (
    <NavigationRail aria-label="Foraging guide" className="max-w-sm">
      <a href="#overview" aria-current="page">
        Overview
      </a>
      <a href="#edible">Edible</a>
      <a href="#toxic">Toxic look-alikes</a>
      <a href="#seasons">Seasons</a>
    </NavigationRail>
  );
}

Overflow

TSX

import { NavigationRail } from "@fungi.computer/caps/components/navigation-rail";

export default function Overflow() {
  return (
    <NavigationRail aria-label="Species" className="w-48">
      <a href="#chanterelle">Chanterelle</a>
      <a href="#morel" aria-current="page">
        Morel
      </a>
      <a href="#oyster">Oyster</a>
      <a href="#lions-mane">Lion's mane</a>
      <a href="#porcini">Porcini</a>
    </NavigationRail>
  );
}

Fit at wide

TSX

import { NavigationRail } from "@fungi.computer/caps/components/navigation-rail";

export default function FitAtWide() {
  return (
    <NavigationRail aria-label="Guide sections" fitAtWide>
      <a href="#overview" aria-current="page">
        Overview
      </a>
      <a href="#edible">Edible</a>
      <a href="#toxic">Toxic look-alikes</a>
      <a href="#seasons">Seasons</a>
    </NavigationRail>
  );
}

Props

NavigationRailProps

Prop	Type	Description
fitAtWide?	boolean	Let a long rail fit across wide layouts while retaining mobile scrolling.

• fitAtWide?boolean

  Let a long rail fit across wide layouts while retaining mobile scrolling.

Full types: API reference.