Header
layoutA responsive site header with logo, navigation links, and an integrated mobile hamburger menu. Supports custom route highlighting for active states.
1Installation
Install the package:
$npm install piece-ui
Import the component:
tsx
1import { Header } from "piece-ui";2Usage
Basic usage
tsx
1import { Header } from "piece-ui";
2
3export default function Example() {
4 return (
5 <Header
6 logo="MyApp"
7 routes={[
8 { label: "Home", href: "/" },
9 { label: "About", href: "/about" },
10 { label: "Projects", href: "/projects" },
11 { label: "Contact", href: "/contact" },
12 ]}
13 activePath="/about"
14 />
15 );
16}3Props
| Prop | Type |
|---|---|
logo | string | React.ReactNode |
routes | { label: string; href: string }[] |
activePath | string |