Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA responsive site header that gains a border and shadow on scroll, can hide while scrolling down, and turns its links into a sheet menu on small screens.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
sticky | boolean | true | Sticks to the top of the page. |
hideOnScroll | boolean | false | Slides out while scrolling down and back while scrolling up. Stays while focused. |
border | "scrolled" | "always" | "never" | "scrolled" | When to draw the bottom border and shadow. |
containerClassName | string | - | Class names for the inner content row (max width is max-w-6xl). |
scrollContainer | RefObject<HTMLElement | null> | - | A scrollable element to watch instead of the page. |
Also accepts all <header> props.
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Marks the current page (aria-current="page"). |
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Main"/"Menu" | Accessible name of the landmark or menu button. |
NavbarBrand and NavbarActions accept the props of <a> and <div>.
md; the mobile menu button shows there and opens the links in a sheet that closes when a link is chosen.