export const title = "Header navigation components"
export const description = "Free and open-source React header navigation components built for modern applications and websites. These header navigations are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/app-navigation",
}

import * as Demos from "@/components/application/app-navigation/header-navigation.demo.tsx";

<PreviewAndCode title="Header navigation example">
    <ResizablePreview id="preview" className="h-[320px] gap-3 overflow-hidden rounded-[20px] border border-secondary bg-primary">
        <Demos.HeaderNavigationDualTierDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="header-navigation/HeaderNavigationDualTierDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this header navigation component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add header-navigation
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/header-navigation" filepath="app-navigation/base-components" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the header navigation components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

## Header navigation examples

Below are examples and variations of this header navigation component:

### Simple {{ tocOnly:true }}

<PreviewAndCode title="Simple">
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden gap-3 h-[320px] border border-secondary bg-primary">
        <Demos.HeaderNavigationSimpleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="header-navigation/HeaderNavigationSimpleDemo" />
    </TabPanel>
</PreviewAndCode>

### Dual-tier {{ tocOnly:true }}

<PreviewAndCode title="Dual-tier">
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden gap-3 h-[320px] border border-secondary bg-primary">
        <Demos.HeaderNavigationDualTierDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="header-navigation/HeaderNavigationDualTierDemo" />
    </TabPanel>
</PreviewAndCode>