> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Header Navigation

> The primary navigation bar at the top of the page — available in 7 layout types and 2 breakpoints.

## Overview

Header Navigation is a horizontal navigation component placed at the top of the page. It supports a logo, menu items with or without dropdowns, and action buttons on the right side.

<div style={{display:"flex",flexDirection:"column",gap:"16px",padding:"24px",background:"#F8F9FA",borderRadius:"12px",overflow:"hidden"}}>
  <div>
    <p style={{fontSize:"12px",color:"#71717A",marginBottom:"8px",fontFamily:"Inter,sans-serif"}}>Type: Default</p>

    <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"80px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 40px",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.06)"}}>
      <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
        <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",border:"1px solid #D0D5DD",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
          <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
        </div>

        <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif",whiteSpace:"nowrap"}}>A'raf DS</span>
      </div>

      <div style={{display:"flex",gap:"24px",alignItems:"center"}}>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Home</span>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500,display:"flex",alignItems:"center",gap:"4px"}}>Products <span style={{fontSize:"10px"}}>▾</span></span>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500,display:"flex",alignItems:"center",gap:"4px"}}>Solutions <span style={{fontSize:"10px"}}>▾</span></span>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>About</span>
      </div>

      <div style={{display:"flex",gap:"8px"}}>
        <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFFFFF",color:"#52525B",fontSize:"15px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Sign In</button>
        <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #0479CE",background:"#0479CE",color:"#FFFFFF",fontSize:"15px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Get Started</button>
      </div>
    </div>
  </div>

  <div>
    <p style={{fontSize:"12px",color:"#71717A",marginBottom:"8px",fontFamily:"Inter,sans-serif"}}>Type: Standard (with dropdown)</p>

    <div style={{position:"relative",borderRadius:"8px",overflow:"visible"}}>
      <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"80px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 40px",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.06)"}}>
        <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
          <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
            <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
          </div>

          <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>A'raf DS</span>
        </div>

        <div style={{display:"flex",gap:"24px",alignItems:"center"}}>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Home</span>
          <span style={{fontSize:"15px",color:"#0479CE",fontFamily:"Inter,sans-serif",fontWeight:500,display:"flex",alignItems:"center",gap:"4px",borderBottom:"2px solid #0479CE",paddingBottom:"2px"}}>Products <span style={{fontSize:"10px"}}>▾</span></span>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500,display:"flex",alignItems:"center",gap:"4px"}}>Solutions <span style={{fontSize:"10px"}}>▾</span></span>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>About</span>
        </div>

        <div style={{display:"flex",gap:"8px"}}>
          <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFFFFF",color:"#52525B",fontSize:"15px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Sign In</button>
          <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #0479CE",background:"#0479CE",color:"#FFFFFF",fontSize:"15px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Get Started</button>
        </div>
      </div>

      {/* Standard Dropdown */}

      <div style={{position:"absolute",left:"220px",top:"80px",background:"#FFFFFF",border:"1px solid #F4F4F5",borderRadius:"8px",padding:"20px",boxShadow:"0 20px 24px -4px rgba(16,24,40,0.08),0 8px 8px -4px rgba(16,24,40,0.03)",minWidth:"280px",zIndex:10}}>
        <div style={{display:"flex",flexDirection:"column",gap:"20px"}}>
          <div>
            <p style={{fontSize:"15px",fontWeight:500,color:"#52525B",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Design System</p>
            <p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Build consistent UIs with our design tokens and components.</p>
          </div>

          <div>
            <p style={{fontSize:"15px",fontWeight:500,color:"#52525B",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Component Library</p>
            <p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Reusable, accessible components for your product.</p>
          </div>

          <div>
            <p style={{fontSize:"15px",fontWeight:500,color:"#52525B",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Figma Kit</p>
            <p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Design-ready assets and templates in Figma.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

## Usage

```jsx theme={null}
import { HeaderNavigation, NavItem, NavDropdown, NavigationActions } from "@araf-ds/core";

export default function App() {
  return (
    <HeaderNavigation type="standard">
      <NavItem href="/home">Home</NavItem>
      <NavDropdown label="Products">
        <NavDropdown.Item href="/design-system" description="Build consistent UIs">
          Design System
        </NavDropdown.Item>
        <NavDropdown.Item href="/components" description="Reusable components">
          Component Library
        </NavDropdown.Item>
      </NavDropdown>
      <NavItem href="/about">About</NavItem>

      <NavigationActions slot="actions">
        <Button variant="secondary-gray">Sign In</Button>
        <Button variant="primary">Get Started</Button>
      </NavigationActions>
    </HeaderNavigation>
  );
}
```

## Type Variants

Header Navigation has **7 layout types** that determine how menu items and sub-menus are displayed.

<Tabs>
  <Tab title="Default">
    Logo and nav items aligned in the center, CTA button on the right. No dropdown.

    <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"80px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 40px",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.08)",margin:"12px 0"}}>
      <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
        <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",display:"flex",alignItems:"center",justifyContent:"center"}}>
          <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
        </div>

        <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>A'raf DS</span>
      </div>

      <div style={{display:"flex",gap:"24px"}}>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Home</span>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Products</span>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Solutions</span>
        <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>About</span>
      </div>

      <div style={{display:"flex",gap:"8px"}}>
        <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFF",color:"#52525B",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif"}}>Sign In</button>
        <button style={{padding:"10px 18px",borderRadius:"8px",background:"#0479CE",color:"#FFF",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none"}}>Get Started</button>
      </div>
    </div>

    ```jsx theme={null}
    <HeaderNavigation type="default">
      <NavItem href="/home">Home</NavItem>
      <NavItem href="/products">Products</NavItem>
      <NavItem href="/solutions">Solutions</NavItem>
      <NavItem href="/about">About</NavItem>
    </HeaderNavigation>
    ```
  </Tab>

  <Tab title="Standard">
    The dropdown menu appears as a **small card** (bordered, rounded) below the clicked nav item. Suitable for menus with a limited number of options.

    <div style={{position:"relative",margin:"12px 0 120px"}}>
      <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"80px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 40px",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.08)"}}>
        <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
          <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
          </div>

          <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>A'raf DS</span>
        </div>

        <div style={{display:"flex",gap:"24px",alignItems:"center"}}>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Home</span>
          <span style={{fontSize:"15px",color:"#0479CE",fontFamily:"Inter,sans-serif",fontWeight:600,display:"flex",alignItems:"center",gap:"4px"}}>Products <span style={{fontSize:"10px"}}>▾</span></span>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500,display:"flex",alignItems:"center",gap:"4px"}}>Solutions <span style={{fontSize:"10px"}}>▾</span></span>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>About</span>
        </div>

        <div style={{display:"flex",gap:"8px"}}>
          <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFF",color:"#52525B",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif"}}>Sign In</button>
          <button style={{padding:"10px 18px",borderRadius:"8px",background:"#0479CE",color:"#FFF",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none"}}>Get Started</button>
        </div>
      </div>

      <div style={{position:"absolute",left:"230px",top:"80px",background:"#FFFFFF",border:"1px solid #F4F4F5",borderRadius:"8px",padding:"20px",boxShadow:"0 20px 24px -4px rgba(16,24,40,0.08)",minWidth:"300px",zIndex:10}}>
        <div style={{display:"flex",flexDirection:"column",gap:"20px"}}>
          <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Design System</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Build consistent UIs with design tokens.</p></div>
          <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Component Library</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Reusable, accessible components.</p></div>
          <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Figma Kit</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Design-ready assets and templates.</p></div>
        </div>
      </div>
    </div>

    ```jsx theme={null}
    <HeaderNavigation type="standard">
      <NavDropdown label="Products">
        <NavDropdown.Item href="/ds" description="Build consistent UIs">Design System</NavDropdown.Item>
        <NavDropdown.Item href="/lib" description="Reusable components">Component Library</NavDropdown.Item>
        <NavDropdown.Item href="/figma" description="Design-ready assets">Figma Kit</NavDropdown.Item>
      </NavDropdown>
    </HeaderNavigation>
    ```
  </Tab>

  <Tab title="Standard with Icon">
    Identical to Standard, but each item in the dropdown is accompanied by an **icon** on the left for easier visual identification.

    ```jsx theme={null}
    <HeaderNavigation type="standard-with-icon">
      <NavDropdown label="Products">
        <NavDropdown.Item href="/ds" icon={<LayoutIcon />} description="Build consistent UIs">
          Design System
        </NavDropdown.Item>
        <NavDropdown.Item href="/lib" icon={<ComponentIcon />} description="Reusable components">
          Component Library
        </NavDropdown.Item>
      </NavDropdown>
    </HeaderNavigation>
    ```
  </Tab>

  <Tab title="Full Width">
    The dropdown spans the **full screen width (1440px)** with a left panel containing a description and CTA, and a right panel with 3 columns of sub-menu items. Ideal for menus with many categories.

    <div style={{position:"relative",margin:"12px 0 260px"}}>
      <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"80px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 40px",borderRadius:"8px 8px 0 0",boxShadow:"0 1px 3px rgba(0,0,0,0.08)"}}>
        <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
          <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
          </div>

          <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>A'raf DS</span>
        </div>

        <div style={{display:"flex",gap:"24px",alignItems:"center"}}>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Home</span>
          <span style={{fontSize:"15px",color:"#0479CE",fontFamily:"Inter,sans-serif",fontWeight:600,display:"flex",alignItems:"center",gap:"4px"}}>Products <span style={{fontSize:"10px"}}>▾</span></span>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500,display:"flex",alignItems:"center",gap:"4px"}}>Solutions <span style={{fontSize:"10px"}}>▾</span></span>
          <span style={{fontSize:"15px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>About</span>
        </div>

        <div style={{display:"flex",gap:"8px"}}>
          <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFF",color:"#52525B",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif"}}>Sign In</button>
          <button style={{padding:"10px 18px",borderRadius:"8px",background:"#0479CE",color:"#FFF",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none"}}>Get Started</button>
        </div>
      </div>

      <div style={{position:"absolute",left:0,right:0,top:"80px",background:"#FFFFFF",padding:"40px",boxShadow:"0 12px 16px -4px rgba(16,24,40,0.08)",display:"flex",gap:"40px",zIndex:10}}>
        <div style={{flexShrink:0,width:"240px",display:"flex",flexDirection:"column",gap:"24px"}}>
          <p style={{fontSize:"17px",fontWeight:700,color:"#011829",fontFamily:"Inter,sans-serif",lineHeight:"24px",margin:0}}>We are committed to giving all of our best efforts.</p>
          <button style={{padding:"10px 18px",borderRadius:"8px",background:"#F0F9FF",color:"#045CA0",fontSize:"14px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"1px solid #F0F9FF",display:"inline-flex",alignItems:"center",gap:"6px",width:"fit-content"}}>Learn more →</button>
        </div>

        <div style={{display:"flex",flex:1,gap:"24px"}}>
          <div style={{flex:1,display:"flex",flexDirection:"column",gap:"24px"}}>
            <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Design System</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Build consistent UIs with our design tokens.</p></div>
            <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Component Library</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Reusable, accessible components.</p></div>
          </div>

          <div style={{flex:1,display:"flex",flexDirection:"column",gap:"24px"}}>
            <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Data Analytics</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Capturing and creating data-driven insights.</p></div>
            <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Deployment</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Deployment on Windows & Linux environments.</p></div>
          </div>

          <div style={{flex:1,display:"flex",flexDirection:"column",gap:"24px"}}>
            <div><p style={{fontSize:"15px",fontWeight:500,color:"#3F3F46",fontFamily:"Inter,sans-serif",margin:"0 0 4px"}}>Training</p><p style={{fontSize:"13px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0,lineHeight:"18px"}}>Improve your team's technical capabilities.</p></div>
          </div>
        </div>
      </div>
    </div>

    ```jsx theme={null}
    <HeaderNavigation type="full-width">
      <NavDropdown
        label="Products"
        featured={{
          title: "We are committed to giving all of our best efforts.",
          ctaLabel: "Learn more",
          ctaHref: "/about",
        }}
      >
        <NavDropdown.Item href="/ds" description="Build consistent UIs">Design System</NavDropdown.Item>
        <NavDropdown.Item href="/analytics" description="Data-driven insights">Data Analytics</NavDropdown.Item>
        <NavDropdown.Item href="/training" description="Improve team capabilities">Training</NavDropdown.Item>
      </NavDropdown>
    </HeaderNavigation>
    ```
  </Tab>

  <Tab title="Full Width with Icon">
    Identical to Full Width, but each sub-menu item is accompanied by an **icon** on the left.

    ```jsx theme={null}
    <HeaderNavigation type="full-width-with-icon">
      <NavDropdown label="Products" featured={{ title: "...", ctaLabel: "Learn more", ctaHref: "/about" }}>
        <NavDropdown.Item href="/ds" icon={<LayoutIcon />} description="Build consistent UIs">
          Design System
        </NavDropdown.Item>
      </NavDropdown>
    </HeaderNavigation>
    ```
  </Tab>

  <Tab title="Simple">
    A **more compact** dropdown with no per-item descriptions, showing only link labels in a single column. Suitable for simple navigation menus.

    ```jsx theme={null}
    <HeaderNavigation type="simple">
      <NavDropdown label="Products">
        <NavDropdown.Item href="/ds">Design System</NavDropdown.Item>
        <NavDropdown.Item href="/lib">Component Library</NavDropdown.Item>
        <NavDropdown.Item href="/figma">Figma Kit</NavDropdown.Item>
      </NavDropdown>
    </HeaderNavigation>
    ```
  </Tab>

  <Tab title="Simple with Icon">
    Identical to Simple, but each item includes a small **icon** to the left of the text.

    ```jsx theme={null}
    <HeaderNavigation type="simple-with-icon">
      <NavDropdown label="Products">
        <NavDropdown.Item href="/ds" icon={<LayoutIcon />}>Design System</NavDropdown.Item>
        <NavDropdown.Item href="/lib" icon={<ComponentIcon />}>Component Library</NavDropdown.Item>
      </NavDropdown>
    </HeaderNavigation>
    ```
  </Tab>
</Tabs>

## Breakpoints

Header Navigation supports two breakpoints: **Desktop** (1440px) and **Mobile Responsive** (360px).

<Tabs>
  <Tab title="Desktop">
    Header width **1440px** with content centered in a **1200px** container. Logo, nav items, and CTA button are displayed horizontally.

    <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"80px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 40px",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.08)",margin:"12px 0"}}>
      <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
        <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",display:"flex",alignItems:"center",justifyContent:"center"}}>
          <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
        </div>

        <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>A'raf DS</span>
      </div>

      <div style={{display:"flex",gap:"24px"}}>
        <span style={{fontSize:"14px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Home</span>
        <span style={{fontSize:"14px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Products ▾</span>
        <span style={{fontSize:"14px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>Solutions ▾</span>
        <span style={{fontSize:"14px",color:"#52525B",fontFamily:"Inter,sans-serif",fontWeight:500}}>About</span>
      </div>

      <div style={{display:"flex",gap:"8px"}}>
        <button style={{padding:"8px 16px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFF",color:"#52525B",fontSize:"13px",fontWeight:500,fontFamily:"Inter,sans-serif"}}>Sign In</button>
        <button style={{padding:"8px 16px",borderRadius:"8px",background:"#0479CE",color:"#FFF",fontSize:"13px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none"}}>Get Started</button>
      </div>
    </div>

    | Property           | Value               |
    | ------------------ | ------------------- |
    | Header width       | 1440px              |
    | Container width    | 1200px              |
    | Height             | 80px                |
    | Nav item spacing   | 24px                |
    | Nav item font size | 16px (Inter Medium) |
  </Tab>

  <Tab title="Mobile Responsive">
    On mobile screens (≤ 768px), nav items are hidden and replaced by a **hamburger menu button** on the right. The header height becomes 72px.

    <div style={{display:"flex",justifyContent:"center",margin:"12px 0"}}>
      <div style={{background:"#FFFFFF",borderBottom:"1px solid #F2F4F7",height:"72px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 16px 0 16px",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.08)",width:"360px"}}>
        <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
          <div style={{width:"36px",height:"36px",borderRadius:"8px",background:"#002D40",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <div style={{width:"5px",height:"20px",background:"#28B4FF",borderRadius:"4px",transform:"rotate(30deg)"}} />
          </div>

          <span style={{fontWeight:700,fontSize:"15px",color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>A'raf DS</span>
        </div>

        <div style={{width:"40px",height:"40px",borderRadius:"8px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}}>
          <div style={{display:"flex",flexDirection:"column",gap:"5px"}}>
            <div style={{width:"22px",height:"2px",background:"#3F3F46",borderRadius:"2px"}} />

            <div style={{width:"22px",height:"2px",background:"#3F3F46",borderRadius:"2px"}} />

            <div style={{width:"22px",height:"2px",background:"#3F3F46",borderRadius:"2px"}} />
          </div>
        </div>
      </div>
    </div>

    | Property           | Value                      |
    | ------------------ | -------------------------- |
    | Header width       | 100% (fluid)               |
    | Horizontal padding | 16px (left) / 12px (right) |
    | Height             | 72px                       |
    | Nav items          | Hidden                     |
    | Menu button        | Hamburger icon (24px)      |
  </Tab>
</Tabs>

## Mobile Header Navigation

For mobile views specifically, 4 size configurations are available.

<div style={{display:"flex",flexDirection:"column",gap:"12px",padding:"24px",background:"#F8F9FA",borderRadius:"12px"}}>
  <div style={{display:"flex",gap:"12px",flexWrap:"wrap"}}>
    <div style={{flex:"1",minWidth:"200px"}}>
      <p style={{fontSize:"11px",color:"#71717A",marginBottom:"6px",fontFamily:"Inter,sans-serif"}}>small-centered (56px)</p>

      <div style={{background:"#FFF",border:"1px solid #F2F4F7",height:"56px",borderRadius:"8px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 16px",boxShadow:"0 1px 2px rgba(0,0,0,0.05)"}}>
        <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />

        <span style={{fontSize:"14px",fontWeight:600,color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>Page Title</span>

        <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />
      </div>
    </div>

    <div style={{flex:"1",minWidth:"200px"}}>
      <p style={{fontSize:"11px",color:"#71717A",marginBottom:"6px",fontFamily:"Inter,sans-serif"}}>small (56px)</p>

      <div style={{background:"#FFF",border:"1px solid #F2F4F7",height:"56px",borderRadius:"8px",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 16px",boxShadow:"0 1px 2px rgba(0,0,0,0.05)"}}>
        <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
          <div style={{width:"24px",height:"24px",background:"#F2F4F7",borderRadius:"6px"}} />

          <span style={{fontSize:"14px",fontWeight:600,color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>Page Title</span>
        </div>

        <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />
      </div>
    </div>
  </div>

  <div style={{display:"flex",gap:"12px",flexWrap:"wrap"}}>
    <div style={{flex:"1",minWidth:"200px"}}>
      <p style={{fontSize:"11px",color:"#71717A",marginBottom:"6px",fontFamily:"Inter,sans-serif"}}>medium (108px)</p>

      <div style={{background:"#FFF",border:"1px solid #F2F4F7",height:"108px",borderRadius:"8px",display:"flex",flexDirection:"column",justifyContent:"center",padding:"0 16px",boxShadow:"0 1px 2px rgba(0,0,0,0.05)",gap:"8px"}}>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
          <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
            <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />

            <span style={{fontSize:"14px",fontWeight:600,color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>Page Title</span>
          </div>

          <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />
        </div>

        <p style={{fontSize:"12px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:0}}>Supporting description text for the page.</p>
      </div>
    </div>

    <div style={{flex:"1",minWidth:"200px"}}>
      <p style={{fontSize:"11px",color:"#71717A",marginBottom:"6px",fontFamily:"Inter,sans-serif"}}>large (152px)</p>

      <div style={{background:"#FFF",border:"1px solid #F2F4F7",height:"152px",borderRadius:"8px",display:"flex",flexDirection:"column",justifyContent:"center",padding:"0 16px",boxShadow:"0 1px 2px rgba(0,0,0,0.05)",gap:"8px"}}>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
          <div style={{display:"flex",alignItems:"center",gap:"8px"}}>
            <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />

            <span style={{fontSize:"14px",fontWeight:600,color:"#0A0A0A",fontFamily:"Inter,sans-serif"}}>Page Title</span>
          </div>

          <div style={{width:"28px",height:"28px",background:"#F2F4F7",borderRadius:"6px"}} />
        </div>

        <p style={{fontSize:"12px",color:"#71717A",fontFamily:"Inter,sans-serif",margin:"0 0 8px"}}>Supporting description text for the page.</p>

        <div style={{display:"flex",gap:"8px"}}>
          <button style={{flex:1,padding:"8px",borderRadius:"6px",background:"#F0F9FF",color:"#045CA0",fontSize:"12px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none"}}>Action</button>
          <button style={{flex:1,padding:"8px",borderRadius:"6px",background:"#0479CE",color:"#FFF",fontSize:"12px",fontWeight:500,fontFamily:"Inter,sans-serif",border:"none"}}>Primary</button>
        </div>
      </div>
    </div>
  </div>
</div>

| Configuration    | Height | Description                                          |
| ---------------- | ------ | ---------------------------------------------------- |
| `small-centered` | 56px   | Centered title, back button on left, action on right |
| `small`          | 56px   | Logo/back on left, title on left, action on right    |
| `medium`         | 108px  | Logo + title + supporting text                       |
| `large`          | 152px  | Logo + title + supporting text + action buttons      |

```jsx theme={null}
import { HeaderNavigationMobile } from "@araf-ds/core";

<HeaderNavigationMobile
  configuration="large"
  title="Products"
  description="Browse our complete product catalog."
  trailingIcon1={<SearchIcon />}
  trailingIcon2={<NotificationIcon />}
/>
```

## Navigation Actions

A slot on the right side of the header for displaying authentication buttons. Two states are available: **Logged Out** (Sign In + CTA) and **Logged In** (avatar or user menu).

<div style={{display:"flex",flexDirection:"column",gap:"16px",padding:"24px",background:"#F8F9FA",borderRadius:"12px"}}>
  <div>
    <p style={{fontSize:"12px",color:"#71717A",marginBottom:"8px",fontFamily:"Inter,sans-serif"}}>Logged Out (default)</p>

    <div style={{display:"flex",gap:"8px"}}>
      <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #D4D4D8",background:"#FFFFFF",color:"#52525B",fontSize:"15px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer",boxShadow:"0 1px 2px rgba(16,24,40,0.05)"}}>Sign In</button>
      <button style={{padding:"10px 18px",borderRadius:"8px",border:"1px solid #0479CE",background:"#0479CE",color:"#FFFFFF",fontSize:"15px",fontWeight:500,fontFamily:"Inter,sans-serif",cursor:"pointer",boxShadow:"0 1px 2px rgba(16,24,40,0.05)"}}>Get Started</button>
    </div>
  </div>

  <div>
    <p style={{fontSize:"12px",color:"#71717A",marginBottom:"8px",fontFamily:"Inter,sans-serif"}}>Logged In</p>

    <div style={{display:"flex",gap:"8px",alignItems:"center"}}>
      <div style={{width:"36px",height:"36px",borderRadius:"50%",background:"#0479CE",display:"flex",alignItems:"center",justifyContent:"center",color:"#FFF",fontSize:"14px",fontWeight:600,fontFamily:"Inter,sans-serif"}}>AB</div>
      <span style={{fontSize:"14px",color:"#3F3F46",fontFamily:"Inter,sans-serif",fontWeight:500}}>Ahmad Badr</span>
      <span style={{fontSize:"10px",color:"#71717A"}}>▾</span>
    </div>
  </div>
</div>

```jsx theme={null}
// Logged out state
<NavigationActions loggedIn={false}>
  <Button variant="secondary-gray">Sign In</Button>
  <Button variant="primary">Get Started</Button>
</NavigationActions>

// Logged in state
<NavigationActions loggedIn={true}>
  <UserMenu user={{ name: "Ahmad Badr", avatar: "/avatar.jpg" }} />
</NavigationActions>
```

## Sub Menu

### Standard Sub Menu

A compact dropdown card (480px) displaying a vertical list of items with a title and description.

| Token         | Value                     |
| ------------- | ------------------------- |
| Background    | `#FFFFFF`                 |
| Border        | `1px solid #F4F4F5`       |
| Border radius | `8px`                     |
| Padding       | `24px`                    |
| Shadow        | `xl` (0px 20px 24px -4px) |
| Width         | 480px                     |

### Full Width Sub Menu

A full-width dropdown (1440px) with a featured panel on the left and 3 columns on the right.

| Token               | Value                     |
| ------------------- | ------------------------- |
| Background          | `#FFFFFF`                 |
| Padding             | `64px 120px`              |
| Shadow              | `lg` (0px 12px 16px -4px) |
| Featured text color | `#011829` (Black)         |
| Featured CTA bg     | `#F0F9FF`                 |
| Featured CTA text   | `#045CA0`                 |
| Item title color    | `#52525B`                 |
| Item desc color     | `#71717A`                 |

## API Reference

### `HeaderNavigation`

<ParamField path="type" type="&#x22;default&#x22; | &#x22;standard&#x22; | &#x22;standard-with-icon&#x22; | &#x22;full-width&#x22; | &#x22;full-width-with-icon&#x22; | &#x22;simple&#x22; | &#x22;simple-with-icon&#x22;" default="&#x22;default&#x22;">
  The navigation layout type, which determines the dropdown menu style.
</ParamField>

<ParamField path="breakpoint" type="&#x22;desktop&#x22; | &#x22;mobile-responsive&#x22;" default="&#x22;desktop&#x22;">
  The rendering breakpoint. In `mobile-responsive` mode, nav items are replaced by a hamburger menu.
</ParamField>

<ParamField path="logo" type="ReactNode">
  The logo content on the left side of the header (logomark + wordmark).
</ParamField>

<ParamField path="sticky" type="boolean" default="false">
  Whether the header stays fixed at the top during scroll (`position: sticky`).
</ParamField>

<ParamField path="className" type="string">
  Additional class for custom styling.
</ParamField>

### `NavItem`

<ParamField path="href" type="string" required>
  The navigation destination URL.
</ParamField>

<ParamField path="active" type="boolean" default="false">
  Marks the item as the currently active page.
</ParamField>

<ParamField path="children" type="ReactNode" required>
  The nav item text label.
</ParamField>

### `NavDropdown`

<ParamField path="label" type="string" required>
  The dropdown trigger text.
</ParamField>

<ParamField path="featured" type="{ title: string; ctaLabel: string; ctaHref: string }">
  Featured panel content (only for `full-width` and `full-width-with-icon` types).
</ParamField>

### `NavDropdown.Item`

<ParamField path="href" type="string" required>
  The dropdown item's destination URL.
</ParamField>

<ParamField path="description" type="string">
  A short description text below the label. Not displayed for the `simple` type.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Icon on the left side of the item. Required for `*-with-icon` types.
</ParamField>

### `HeaderNavigationMobile`

<ParamField path="configuration" type="&#x22;small-centered&#x22; | &#x22;small&#x22; | &#x22;medium&#x22; | &#x22;large&#x22;" required>
  The size and layout of the mobile header.
</ParamField>

<ParamField path="title" type="string">
  The page title displayed at the center or left of the header.
</ParamField>

<ParamField path="description" type="string">
  Supporting description below the title (only for `medium` and `large`).
</ParamField>

<ParamField path="trailingIcon1" type="ReactNode">
  The first icon on the right side of the header.
</ParamField>

<ParamField path="trailingIcon2" type="ReactNode">
  The second icon on the right side of the header.
</ParamField>

<ParamField path="trailingIcon3" type="ReactNode">
  The third icon on the right side of the header.
</ParamField>

## Accessibility

<Note>
  Header Navigation follows the WAI-ARIA patterns for **navigation landmark** and **disclosure widget**.
</Note>

* Use a `<nav>` element with `aria-label="Main navigation"` as the wrapper
* Dropdown buttons must use `aria-expanded` (`true`/`false`) and `aria-haspopup="true"`
* The dropdown panel uses `role="menu"` with items typed as `role="menuitem"`
* Press `Escape` to close an open dropdown
* Keyboard navigation: `Tab` between items, `Enter`/`Space` to open a dropdown, `Arrow` keys for items within the dropdown
* The mobile hamburger button uses `aria-label="Open menu"` / `aria-label="Close menu"`
* The logo link has `aria-label="Go to homepage"`

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use a single Header Navigation per page
    * Limit the number of nav items at the top level (maximum 5–6 items)
    * Use the `full-width` type for menus with many sub-categories
    * Ensure the active item is marked with the primary color (`#0479CE`)
    * Include `NavigationActions` with a clear CTA
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't nest dropdowns more than 2 levels deep
    * Don't put more than 3 columns in a Standard sub menu
    * Don't use overly long nav item text (max \~2 words)
    * Don't remove the logo from the header
    * Don't use the Desktop breakpoint on screen widths \< 768px
  </Card>
</CardGroup>