Navigation Components

Standard navigation patterns styled with Crystal tokens. For the full Crystal navigation bar system, see CrystalNav.

Tabs

Tabbed content panels.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@artasce/crystal-ui';

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="analytics">Analytics content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

Page hierarchy navigation with separator support.

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from '@artasce/crystal-ui';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Also exports: BreadcrumbEllipsis for collapsed items.

import {
  NavigationMenu, NavigationMenuList, NavigationMenuItem,
  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
} from '@artasce/crystal-ui';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/crystal">Crystal Design System</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">About</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Also exports: NavigationMenuViewport, NavigationMenuIndicator, navigationMenuTriggerStyle.

Menubar

Desktop application-style menu bar with sub-menus and keyboard navigation.

import {
  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
  MenubarItem, MenubarSeparator, MenubarShortcut,
} from '@artasce/crystal-ui';

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New <MenubarShortcut>Cmd+N</MenubarShortcut></MenubarItem>
      <MenubarItem>Open <MenubarShortcut>Cmd+O</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Quit</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Also exports: checkbox items, radio items, sub-menus, groups, and labels.

Pagination

Page navigation with previous/next and numbered links.

import {
  Pagination, PaginationContent, PaginationItem,
  PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
} from '@artasce/crystal-ui';

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

Toggle & ToggleGroup

Pressable toggle buttons, individually or in groups.

import { Toggle } from '@artasce/crystal-ui';

<Toggle aria-label="Toggle bold">
  <Bold className="size-4" />
</Toggle>

import { ToggleGroup, ToggleGroupItem } from '@artasce/crystal-ui';

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
  <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
  <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
</ToggleGroup>

Toggle exports: toggleVariants for custom styling.

ButtonGroup

Groups related buttons together with shared borders and separators.

import { ButtonGroup, ButtonGroupSeparator } from '@artasce/crystal-ui';

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Center</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Right</Button>
</ButtonGroup>

Also exports: ButtonGroupText, buttonGroupVariants.

Import All

import {
  Tabs, TabsList, TabsTrigger, TabsContent,
  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage,
  NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger,
  Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem,
  Pagination, PaginationContent, PaginationItem, PaginationLink,
  Toggle, ToggleGroup, ToggleGroupItem,
  ButtonGroup, ButtonGroupSeparator,
} from '@artasce/crystal-ui';

On this page