Header

Header is a sticky top navigation bar built with a compound component pattern for maximum flexibility. It provides layout sections for branding, navigation, and actions.

Preview

Page content area

Search...

Page content area

Sidebar

Dashboard

Projects

Settings

Page content area

Usage

Default Header

The standard header layout with logo, navigation, and actions.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";
import { Avatar, AvatarImage, AvatarFallback } from "@e-infra/design-system";
import { Button } from "@e-infra/design-system";
import { Bell } from "lucide-react";

<Header>
  <HeaderContent>
    <HeaderLeft>
      {/* Logo */}
      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
        <LogoIcon className="h-4 w-4" />
      </div>
      {/* Navigation */}
      <nav className="flex items-center gap-4 text-sm font-medium">
        <a href="/dashboard" className="transition-colors hover:text-foreground/80">
          Dashboard
        </a>
        <a href="/projects" className="transition-colors hover:text-foreground/80">
          Projects
        </a>
        <a href="/team" className="transition-colors hover:text-foreground/80">
          Team
        </a>
      </nav>
    </HeaderLeft>
    <HeaderRight>
      {/* Actions */}
      <Button variant="ghost" size="icon">
        <Bell className="h-4 w-4" />
      </Button>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="User" />
        <AvatarFallback>U</AvatarFallback>
      </Avatar>
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with NavigationMenu

Use the NavigationMenu primitive components for consistent styling, accessibility, and dropdown support.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuIndicator,
} from "@e-infra/design-system";

<Header>
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuLink href="/dashboard">Dashboard</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/projects">Projects</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/team">Team</NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
        {/* Optional: Shows an arrow indicator below the active trigger */}
        <NavigationMenuIndicator />
      </NavigationMenu>
    </HeaderLeft>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with Dropdown Menus

Create rich dropdown menus using NavigationMenuTrigger and NavigationMenuContent.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuIndicator,
} from "@e-infra/design-system";
import { BarChart3, Users, FileText, HelpCircle } from "lucide-react";

<Header>
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuLink href="/dashboard">Dashboard</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Analytics</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="grid gap-3 p-4 w-[400px]">
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <BarChart3 className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Overview</div>
                    <div className="text-xs text-muted-foreground">
                      View your analytics dashboard
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <Users className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Users</div>
                    <div className="text-xs text-muted-foreground">
                      Manage user analytics
                    </div>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="grid gap-3 p-4 w-[400px]">
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <FileText className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Documentation</div>
                    <div className="text-xs text-muted-foreground">
                      Read the docs
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <HelpCircle className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Help Center</div>
                    <div className="text-xs text-muted-foreground">
                      Get support
                    </div>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        {/* Visual indicator arrow - appears below active trigger */}
        <NavigationMenuIndicator />
      </NavigationMenu>
    </HeaderLeft>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with Centered Content

Use HeaderCenter for search bars or centered navigation elements.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderCenter,
  HeaderRight,
} from "@e-infra/design-system";
import { Input } from "@e-infra/design-system";
import { Search } from "lucide-react";

<Header>
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <nav className="flex items-center gap-4 text-sm font-medium">
        <a href="/dashboard">Dashboard</a>
      </nav>
    </HeaderLeft>
    <HeaderCenter>
      <div className="relative w-full max-w-md">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input type="search" placeholder="Search..." className="w-full pl-8" />
      </div>
    </HeaderCenter>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with Sidebar

When using a sidebar layout, the header typically has no logo (handled by the sidebar). Use container={false} on HeaderContent to allow the header content to span the full width.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import {
  Header,
  HeaderContent,
  HeaderRight,
} from "@e-infra/design-system";
import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
} from "@e-infra/design-system";

<div className="flex min-h-screen">
  <Sidebar>
    <SidebarHeader>
      <span className="font-semibold">Lab Management</span>
    </SidebarHeader>
    <SidebarContent>{/* Navigation items */}</SidebarContent>
  </Sidebar>
  <div className="flex-1">
    <Header>
      <HeaderContent container={false}>
        <HeaderRight>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="User" />
            <AvatarFallback>U</AvatarFallback>
          </Avatar>
        </HeaderRight>
      </HeaderContent>
    </Header>
    <main className="p-6">{/* Page content */}</main>
  </div>
</div>;

Custom Background

Apply custom styling using the className prop on Header for gradients, colors, or other visual treatments.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";

<Header className="bg-gradient-to-r from-primary/90 to-secondary/90 border-transparent">
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <nav className="flex items-center gap-4 text-sm font-medium">
        <a href="#" className="text-white/90 hover:text-white">
          Dashboard
        </a>
      </nav>
    </HeaderLeft>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

NavigationMenu Components

When using the NavigationMenu primitive components in the Header, here are the key components:

Prop	Type	Default	Description
viewport	`boolean`	`true`	Whether to automatically render the viewport
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Navigation content (NavigationMenuList, etc.)

NavigationMenuList

The list container for navigation items.

NavigationMenuItem

A single navigation item with hover underline animation.

NavigationMenuLink

A styled link for navigation items.

NavigationMenuTrigger

A button that toggles dropdown content. Includes a chevron icon that rotates when open.

NavigationMenuContent

The dropdown content container with animations.

NavigationMenuIndicator

An optional visual indicator that shows an arrow pointing to the active trigger. Place it inside NavigationMenu after NavigationMenuList.

tsx

1
2
3
4
<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuIndicator />
</NavigationMenu>

NavigationMenuViewport

The container that displays dropdown content. Automatically rendered by NavigationMenu when viewport={true} (default). Only use manually if you need custom positioning:

tsx

1
2
3
4
<NavigationMenu viewport={false}>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuViewport className="custom-styles" />
</NavigationMenu>

NavigationMenuTriggerStyle

A CVA style utility (not a component) for creating custom triggers. Used internally by NavigationMenuTrigger.

tsx

1
2
3
4
5
6
import { NavigationMenuTriggerStyle } from "@e-infra/design-system";

// Use for custom triggers
<button className={NavigationMenuTriggerStyle()}>
  Custom Trigger
</button>

Components

Header

The root container component that provides sticky positioning and base styling.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Header content (typically HeaderContent)

HeaderContent

The inner container that manages layout, spacing, and width constraints.

Prop	Type	Default	Description
container	`boolean`	`true`	Whether to constrain width to container max-width
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Layout sections (HeaderLeft, HeaderCenter, HeaderRight)

HeaderLeft

Left-aligned section for logo, navigation, and primary actions.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Left-side content

HeaderCenter

Centered section that flexes to fill available space. Ideal for search bars or centered navigation.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Center content

HeaderRight

Right-aligned section (pushed to far right with ml-auto) for actions, user menu, etc.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Right-side content

Structure

Part	Details
Outer wrapper	Sticky top header (`sticky top-0`) with backdrop blur and border
HeaderContent	Flex container with `h-14` (56px) height, horizontal padding
HeaderLeft	Flex row with gap for logo and navigation
HeaderCenter	Flex item with `flex-1` and centered content
HeaderRight	Flex row with `ml-auto` to push to far right

Notes

The Header component uses supports-backdrop-filter:bg-background/60 for progressive enhancement
Navigation elements (menus, dropdowns) can be composed using the separate NavigationMenu primitive components
All layout sections accept className for custom styling while maintaining the base layout behavior
NavigationMenuViewport is automatically rendered by NavigationMenu - you don't need to add it manually unless customizing
Add NavigationMenuIndicator for a polished visual indicator showing which dropdown is active

Header

Header is a sticky top navigation bar built with a compound component pattern for maximum flexibility. It provides layout sections for branding, navigation, and actions.

Preview

Page content area

Search...

Page content area

Sidebar

Dashboard

Projects

Settings

Page content area

Usage

Default Header

The standard header layout with logo, navigation, and actions.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";
import { Avatar, AvatarImage, AvatarFallback } from "@e-infra/design-system";
import { Button } from "@e-infra/design-system";
import { Bell } from "lucide-react";

<Header>
  <HeaderContent>
    <HeaderLeft>
      {/* Logo */}
      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
        <LogoIcon className="h-4 w-4" />
      </div>
      {/* Navigation */}
      <nav className="flex items-center gap-4 text-sm font-medium">
        <a href="/dashboard" className="transition-colors hover:text-foreground/80">
          Dashboard
        </a>
        <a href="/projects" className="transition-colors hover:text-foreground/80">
          Projects
        </a>
        <a href="/team" className="transition-colors hover:text-foreground/80">
          Team
        </a>
      </nav>
    </HeaderLeft>
    <HeaderRight>
      {/* Actions */}
      <Button variant="ghost" size="icon">
        <Bell className="h-4 w-4" />
      </Button>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="User" />
        <AvatarFallback>U</AvatarFallback>
      </Avatar>
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with NavigationMenu

Use the NavigationMenu primitive components for consistent styling, accessibility, and dropdown support.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuIndicator,
} from "@e-infra/design-system";

<Header>
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuLink href="/dashboard">Dashboard</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/projects">Projects</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/team">Team</NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
        {/* Optional: Shows an arrow indicator below the active trigger */}
        <NavigationMenuIndicator />
      </NavigationMenu>
    </HeaderLeft>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with Dropdown Menus

Create rich dropdown menus using NavigationMenuTrigger and NavigationMenuContent.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuIndicator,
} from "@e-infra/design-system";
import { BarChart3, Users, FileText, HelpCircle } from "lucide-react";

<Header>
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuLink href="/dashboard">Dashboard</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Analytics</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="grid gap-3 p-4 w-[400px]">
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <BarChart3 className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Overview</div>
                    <div className="text-xs text-muted-foreground">
                      View your analytics dashboard
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <Users className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Users</div>
                    <div className="text-xs text-muted-foreground">
                      Manage user analytics
                    </div>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="grid gap-3 p-4 w-[400px]">
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <FileText className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Documentation</div>
                    <div className="text-xs text-muted-foreground">
                      Read the docs
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                    <HelpCircle className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">Help Center</div>
                    <div className="text-xs text-muted-foreground">
                      Get support
                    </div>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        {/* Visual indicator arrow - appears below active trigger */}
        <NavigationMenuIndicator />
      </NavigationMenu>
    </HeaderLeft>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with Centered Content

Use HeaderCenter for search bars or centered navigation elements.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderCenter,
  HeaderRight,
} from "@e-infra/design-system";
import { Input } from "@e-infra/design-system";
import { Search } from "lucide-react";

<Header>
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <nav className="flex items-center gap-4 text-sm font-medium">
        <a href="/dashboard">Dashboard</a>
      </nav>
    </HeaderLeft>
    <HeaderCenter>
      <div className="relative w-full max-w-md">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input type="search" placeholder="Search..." className="w-full pl-8" />
      </div>
    </HeaderCenter>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

Header with Sidebar

When using a sidebar layout, the header typically has no logo (handled by the sidebar). Use container={false} on HeaderContent to allow the header content to span the full width.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import {
  Header,
  HeaderContent,
  HeaderRight,
} from "@e-infra/design-system";
import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
} from "@e-infra/design-system";

<div className="flex min-h-screen">
  <Sidebar>
    <SidebarHeader>
      <span className="font-semibold">Lab Management</span>
    </SidebarHeader>
    <SidebarContent>{/* Navigation items */}</SidebarContent>
  </Sidebar>
  <div className="flex-1">
    <Header>
      <HeaderContent container={false}>
        <HeaderRight>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="User" />
            <AvatarFallback>U</AvatarFallback>
          </Avatar>
        </HeaderRight>
      </HeaderContent>
    </Header>
    <main className="p-6">{/* Page content */}</main>
  </div>
</div>;

Custom Background

Apply custom styling using the className prop on Header for gradients, colors, or other visual treatments.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  Header,
  HeaderContent,
  HeaderLeft,
  HeaderRight,
} from "@e-infra/design-system";

<Header className="bg-gradient-to-r from-primary/90 to-secondary/90 border-transparent">
  <HeaderContent>
    <HeaderLeft>
      <Logo />
      <nav className="flex items-center gap-4 text-sm font-medium">
        <a href="#" className="text-white/90 hover:text-white">
          Dashboard
        </a>
      </nav>
    </HeaderLeft>
    <HeaderRight>
      <UserActions />
    </HeaderRight>
  </HeaderContent>
</Header>;

NavigationMenu Components

When using the NavigationMenu primitive components in the Header, here are the key components:

Prop	Type	Default	Description
viewport	`boolean`	`true`	Whether to automatically render the viewport
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Navigation content (NavigationMenuList, etc.)

NavigationMenuList

The list container for navigation items.

NavigationMenuItem

A single navigation item with hover underline animation.

NavigationMenuLink

A styled link for navigation items.

NavigationMenuTrigger

A button that toggles dropdown content. Includes a chevron icon that rotates when open.

NavigationMenuContent

The dropdown content container with animations.

NavigationMenuIndicator

An optional visual indicator that shows an arrow pointing to the active trigger. Place it inside NavigationMenu after NavigationMenuList.

tsx

1
2
3
4
<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuIndicator />
</NavigationMenu>

NavigationMenuViewport

The container that displays dropdown content. Automatically rendered by NavigationMenu when viewport={true} (default). Only use manually if you need custom positioning:

tsx

1
2
3
4
<NavigationMenu viewport={false}>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuViewport className="custom-styles" />
</NavigationMenu>

NavigationMenuTriggerStyle

A CVA style utility (not a component) for creating custom triggers. Used internally by NavigationMenuTrigger.

tsx

1
2
3
4
5
6
import { NavigationMenuTriggerStyle } from "@e-infra/design-system";

// Use for custom triggers
<button className={NavigationMenuTriggerStyle()}>
  Custom Trigger
</button>

Components

Header

The root container component that provides sticky positioning and base styling.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Header content (typically HeaderContent)

HeaderContent

The inner container that manages layout, spacing, and width constraints.

Prop	Type	Default	Description
container	`boolean`	`true`	Whether to constrain width to container max-width
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Layout sections (HeaderLeft, HeaderCenter, HeaderRight)

HeaderLeft

Left-aligned section for logo, navigation, and primary actions.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Left-side content

HeaderCenter

Centered section that flexes to fill available space. Ideal for search bars or centered navigation.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Center content

HeaderRight

Right-aligned section (pushed to far right with ml-auto) for actions, user menu, etc.

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes
children	`React.ReactNode`	-	Right-side content

Structure

Part	Details
Outer wrapper	Sticky top header (`sticky top-0`) with backdrop blur and border
HeaderContent	Flex container with `h-14` (56px) height, horizontal padding
HeaderLeft	Flex row with gap for logo and navigation
HeaderCenter	Flex item with `flex-1` and centered content
HeaderRight	Flex row with `ml-auto` to push to far right

Notes

The Header component uses supports-backdrop-filter:bg-background/60 for progressive enhancement
Navigation elements (menus, dropdowns) can be composed using the separate NavigationMenu primitive components
All layout sections accept className for custom styling while maintaining the base layout behavior
NavigationMenuViewport is automatically rendered by NavigationMenu - you don't need to add it manually unless customizing
Add NavigationMenuIndicator for a polished visual indicator showing which dropdown is active