Check Pro Templates
Indie UI

Reusable header component

The header component comes with two variants (wide and centered) that are very common in web applications. You can also customize weather the header should be sticky or not easily.

You have full control over the items layout displayed on the mobile and desktop verisons of the header. Which makes it easy to customize the header to fit your needs.

Demo

Props

PropTypeDefault
variant
default | centered
default
sticky
boolean
false
Logo
ReactNode
-
desktopItems
ReactNode
-
mobileItems
({ setIsOpen }: { setIsOpen: (open: boolean) => void }) => ReactNode | ReactNode
-

On this page