Header

Introduction

The Header component provides the site top navigation with logo, menu, theme switcher, and i18n support.

Example

Props

background

Customize the background color of the Header.

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="primary" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="secondary" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="accent" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="base-100" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="primary/50" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="base-300/80" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="transparent" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="none" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header background="none" shadow="none" sticky={false} />

height

Controls the Header height.

navPosition

Controls the navigation area position.

---



import { Header, type INavItem } from "@coffic/cosy-ui";

const navItems: INavItem[] = [
	{ href: "/docs", title: "Docs" },
	{ href: "/components", title: "Components" },
	{ href: "/examples", title: "Examples" },
];
---

<Header navPosition="start" navItems={navItems} sticky={false} />

---



import { Header, type INavItem } from "@coffic/cosy-ui";

const navItems: INavItem[] = [
	{ href: "/docs", title: "Docs" },
	{ href: "/components", title: "Components" },
	{ href: "/examples", title: "Examples" },
];
---

<Header navPosition="center" navItems={navItems} sticky={false} />

---



import { Header, type INavItem } from "@coffic/cosy-ui";

const navItems: INavItem[] = [
	{ href: "/docs", title: "Docs" },
	{ href: "/components", title: "Components" },
	{ href: "/examples", title: "Examples" },
];
---

<Header navPosition="end" navItems={navItems} sticky={false} />

shadow

Controls the shadow intensity of the Header.

---



import { Header } from "@coffic/cosy-ui";
---

<Header shadow="none" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header shadow="sm" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header shadow="md" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header shadow="lg" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header shadow="xl" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header shadow="2xl" sticky={false} />

sticky

Whether to stick to the top of the page.

textColor

Controls the text color of the Header.

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="base-content" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="primary" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="secondary" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="accent" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="muted" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="info" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="success" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="warning" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="error" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="white" sticky={false} />

---



import { Header } from "@coffic/cosy-ui";
---

<Header textColor="black" sticky={false} />

Slots

Content at the left side of the navbar.

Content at the center of the navbar.

Content at the right side of the navbar.