Navigation Components

import { SideNav } from '@gtcx/ui';
 
<SideNav
  items={[
    { key: 'dashboard', label: 'Dashboard', icon: <LayoutGrid />, path: '/' },
    { key: 'users', label: 'Users', icon: <Users />, path: '/users',
      children: [
        { key: 'list', label: 'User List', path: '/users/list' },
        { key: 'roles', label: 'Roles', path: '/users/roles' },
      ],
    },
  ]}
  activeKey="dashboard"
/>

import { Toolbar } from '@gtcx/ui';
 
<Toolbar
  title="Users"
  breadcrumbs={[{ label: 'Home', path: '/' }, { label: 'Users' }]}
  actions={<Button variant="primary">Add User</Button>}
/>

import { Breadcrumbs } from '@gtcx/ui';
 
<Breadcrumbs
  items={[
    { label: 'Home', path: '/' },
    { label: 'Settings', path: '/settings' },
    { label: 'Security' },
  ]}
/>

import { Tabs } from '@gtcx/ui';
 
<Tabs defaultValue="general">
  <Tabs.List>
    <Tabs.Trigger value="general">General</Tabs.Trigger>
    <Tabs.Trigger value="security">Security</Tabs.Trigger>
    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="general">General settings...</Tabs.Content>
  <Tabs.Content value="security">Security settings...</Tabs.Content>
  <Tabs.Content value="billing">Billing settings...</Tabs.Content>
</Tabs>

import { MegaMenu } from '@gtcx/ui';
 
<MegaMenu
  items={[
    {
      label: 'Products',
      columns: [
        { heading: 'Categories', items: [...] },
        { heading: 'Featured', items: [...] },
      ],
    },
  ]}
/>

import { DropdownMenu } from '@gtcx/ui';
 
<DropdownMenu>
  <DropdownMenu.Trigger><Button>Actions</Button></DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item destructive>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

import { Command } from '@gtcx/ui';
 
<Command>
  <Command.Input placeholder="Type a command..." />
  <Command.List>
    <Command.Group heading="Navigation">
      <Command.Item>Go to Dashboard</Command.Item>
      <Command.Item>Go to Settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command>

import { ContextMenu } from '@gtcx/ui';
 
<ContextMenu>
  <ContextMenu.Trigger>
    <div>Right-click me</div>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Copy</ContextMenu.Item>
    <ContextMenu.Item>Paste</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

import { Menubar } from '@gtcx/ui';
 
<Menubar>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>New</Menubar.Item>
      <Menubar.Item>Open</Menubar.Item>
      <Menubar.Item>Save</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar>

import { NavigationMenu } from '@gtcx/ui';
 
<NavigationMenu
  items={[
    { label: 'Home', path: '/' },
    { label: 'Products', path: '/products', children: [...] },
    { label: 'About', path: '/about' },
  ]}
/>