IconRailSidebar

Code

import { Home, Users } from "lucide-react";import { IconRailSidebar } from "@fadymondy/nasaq/web";const sections = [  { id: "home", label: "Home", icon: <Home />, groups: [{ id: "g", items: [{ id: "dash", label: "Dashboard" }] }] },  { id: "people", label: "People", icon: <Users />, groups: [{ id: "g", items: [{ id: "users", label: "Users" }, { id: "roles", label: "Roles" }] }] },];export function Page() {  return (    <IconRailSidebar sections={sections} defaultValue="people" onItemSelect={(id) => console.log(id)}>      <main>Content</main>    </IconRailSidebar>  );}

Navigation · beta

Live examples and controls: IconRailSidebar in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/icon-rail-sidebar.json

The navigation frame for products with many areas. The narrow rail (icons with tooltips) holds the areas; the sub-sidebar next to it lists the pages of the chosen area, in groups, with expandable parents. Your page is children and fills the rest. On narrow screens both fold into a sheet behind a menu button.

When to useCopy Anchor Link

• Admin areas and dashboards with 4 to 8 top-level areas and several pages in each.

When not to useCopy Anchor Link

• One flat list of pages: use the AppShell sidebar.
• Settings pages: use SettingsSections.

ImportCopy Anchor Link

import { IconRailSidebar } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { Home, Users } from "lucide-react";
import { IconRailSidebar } from "@fadymondy/nasaq/web";

const sections = [
  { id: "home", label: "Home", icon: <Home />, groups: [{ id: "g", items: [{ id: "dash", label: "Dashboard" }] }] },
  { id: "people", label: "People", icon: <Users />, groups: [{ id: "g", items: [{ id: "users", label: "Users" }, { id: "roles", label: "Roles" }] }] },
];

export function Page() {
  return (
    <IconRailSidebar sections={sections} defaultValue="people" onItemSelect={(id) => console.log(id)}>
      <main>Content</main>
    </IconRailSidebar>
  );
}

AnatomyCopy Anchor Link

IconRailSidebar        data-slot="icon-rail-sidebar"
├─ rail                data-slot="icon-rail": brand, section buttons, railFooter
├─ sub-sidebar         data-slot="icon-rail-sub": title, subHeader, groups, subFooter
├─ mobile bar          data-slot="icon-rail-mobile-bar": menu button, opens a Sheet with rail and sub
└─ content             data-slot="icon-rail-content": children

APICopy Anchor Link

IconRailSidebarCopy Anchor Link

RailGroup is { id, label?, items }; RailLink is { id, label, icon?, href?, badge?, children? }.

ExamplesCopy Anchor Link

• Controlled: value={section} onValueChange={setSection} activeItem={page}.
• Links: give each RailLink an href and route in onItemSelect.
• Arabic: pass Arabic labels; the rail moves to the inline start and mirrors.

AccessibilityCopy Anchor Link

Rail buttons are named by their label (also the tooltip); the active one has aria-current. Pass labels for the menu and collapse buttons in other languages.

RTL & i18nCopy Anchor Link

The rail sits at the inline start and the sub-sidebar mirrors. Built-in English and Arabic strings follow the Nasaq locale. Section and page labels are yours to translate.

Styling & tokensCopy Anchor Link

Uses bg-nq-selected, bg-nq-hover, border-border, rounded-control and the sidebar item styles. Extend with className.

Do / Don'tCopy Anchor Link

• Do keep the rail to a handful of areas with recognisable icons.
• Do not put actions on the rail; it navigates.

RelatedCopy Anchor Link

• AppShell
• AdminArea

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-navigation-icon-rail-sidebar--docs