Header
Installation
Add the following Soul components
The header component uses the banner and navigation components. Make sure you have added them to your project.
Install the following dependencies
npm install react-headroomCopy and paste the following code into your project
sections/header/index.tsx
'use client';import { ComponentPropsWithoutRef, useEffect, useState } from 'react';import Headroom from 'react-headroom';import { Banner } from '@/vibes/soul/primitives/banner';import { Navigation } from '@/vibes/soul/primitives/navigation';export interface HeaderProps { navigation: ComponentPropsWithoutRef<typeof Navigation>; banner?: ComponentPropsWithoutRef<typeof Banner>;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --header-background: hsl(var(--background)); * } * ``` */export function Header({ navigation, banner }: HeaderProps) { const [bannerElement, setBannerElement] = useState<HTMLElement | null>(null); const [bannerHeight, setBannerHeight] = useState(0); const [isFloating, setIsFloating] = useState(false); useEffect(() => { if (!bannerElement) return; const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { entries.forEach((entry) => { setBannerHeight(entry.contentRect.height); }); }); resizeObserver.observe(bannerElement); return () => { resizeObserver.disconnect(); }; }, [bannerElement]); return ( <div> {banner && <Banner ref={setBannerElement} {...banner} />} <div className="bg-[var(--header-background,hsl(var(--background)))]"> <Headroom onUnfix={() => setIsFloating(false)} onUnpin={() => setIsFloating(true)} pinStart={bannerHeight} > <div className="p-2"> <Navigation {...navigation} isFloating={isFloating} /> </div> </Headroom> </div> </div> );}Usage
import { Header } from '@/vibes/soul/sections/header';function Usage() { return ( <Header banner={{ id: 'example-banner', children: <p>Get 15% off and free shipping with discount code.</p>, }} navigation={{ links: [ { label: 'Shop', href: '#', }, ], logo: 'Logo', cartHref: '#', accountHref: '#', searchHref: '#', }} /> );}API Reference
HeaderProps
| Prop | Type | Default |
|---|---|---|
navigation | ||
banner |
See the Navigation and Banner components for their respective props.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --header-background: hsl(var(--background));}