Navigation

Navigation patterns built from real `@blastx/ui` primitives instead of hand-drawn product mockups.

1. App Header

A production-style top bar composed from `Button` and `Avatar` primitives.

BlastX Thought Leadership

Internal publishing workspace

<header className="sticky top-0 border-b border-border bg-card/80 backdrop-blur-xl">
  <div className="flex items-center justify-between px-4 py-3">
    <div className="flex items-center gap-3">
      <BrandMark size="sm" />
      <span className="text-lg font-semibold">BlastX Thought Leadership</span>
    </div>

    <div className="hidden items-center gap-1 md:flex">
      {navLinks.map((link) => (
        <Button key={link} variant={activeNav === link ? 'secondary' : 'ghost'}>
          {link}
        </Button>
      ))}
    </div>

    <div className="flex items-center gap-3">
      <Button size="sm">
        <Plus className="size-4" />
        New Article
      </Button>
      <Avatar>
        <AvatarFallback>BW</AvatarFallback>
      </Avatar>
    </div>
  </div>
</header>

2. Brand Mark

Use the same gradient logo treatment at multiple sizes for headers, auth screens, and setup flows.

Small

Medium

Large

<BrandMark size="sm" />
<BrandMark size="md" />
<BrandMark size="lg" />

3. User Avatar

Prefer the shared `Avatar` primitive for identity cues, status rings, and alternate profile treatments.

BWDefault

BWWith ring

JPGradient

BWLarge

<Avatar>
  <AvatarFallback>BW</AvatarFallback>
</Avatar>

<Avatar className="ring-2 ring-primary/30 ring-offset-2">
  <AvatarFallback>BW</AvatarFallback>
</Avatar>

<Avatar className="bg-gradient-to-br from-primary to-secondary">
  <AvatarFallback className="bg-transparent text-white">JP</AvatarFallback>
</Avatar>

4. Navigation Links And Tabs

Use button-like nav links for global navigation and `Tabs` for local section switching.

Global navigation

Admin section tabs

Users

Content for the users admin view.

<div className="flex items-center gap-1">
  {navLinks.map((link) => (
    <Button key={link} variant={activeNav === link ? 'secondary' : 'ghost'}>
      {link}
    </Button>
  ))}
</div>

<Tabs value={adminView} onValueChange={setAdminView}>
  <TabsList>
    <TabsTrigger value="Users">Users</TabsTrigger>
    <TabsTrigger value="Organizations">Organizations</TabsTrigger>
  </TabsList>
</Tabs>

5. Dropdown Menus

Use `DropdownMenu` for user actions, section utilities, and compact option lists.

Avatar trigger

Button trigger

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Avatar><AvatarFallback>BW</AvatarFallback></Avatar>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Admin Panel</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Sign Out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

6. Workflow Stepper

A structured progress rail for long task flows. This remains a custom pattern, but it now sits in a real `Card` shell.

Article Workflow

Guide users through multi-step tasks with one clear current state.

Setup

Author and topic

Research

Background research

SEO Strategy

Keyword targeting

Outline

Current

Article structure

Title

Choose a title

Writing

Section drafting

Quality Check

Content review

Featured Image

Generate image

Export

Download .docx

<Card>
  <CardHeader>
    <CardTitle>Article Workflow</CardTitle>
  </CardHeader>
  <CardContent>
    {workflowSteps.map((step, index) => (
      <div key={step.label} className="flex gap-3">
        {/* status dot + connector */}
        {/* icon + copy */}
      </div>
    ))}
  </CardContent>
</Card>

7. Quick Navigation Grid

Quick-access dashboards should still use the shared button treatment, not custom link mockups.

Quick Navigation

Compact shortcuts for power-user admin surfaces.

<Card>
  <CardHeader>
    <CardTitle>Quick Navigation</CardTitle>
  </CardHeader>
  <CardContent className="grid gap-2 sm:grid-cols-2">
    {quickNavItems.map((item) => (
      <Button key={item.label} className="justify-start" variant="ghost">
        <item.icon className="size-4" />
        {item.label}
      </Button>
    ))}
  </CardContent>
</Card>