Vibes logo

Navigation

Installation

Run the following command

npx vibes@latest add navigation

Usage

import { Navigation } from '@/vibes/soul/primitives/navigation';const navigationLinks = [  {    label: 'Shop All',    href: '#',  }]function Usage() {  return (    <Navigation        accountHref="#"        cartHref="#"        links={navigationLinks}        logo="SOUL"        searchHref="#"    />  );}

API Reference

PropTypeDefault
className
string
isFloating
boolean
false
accountHref*
string
cartCount
Streamable<number | null>
cartHref*
string
links*
Streamable<Link[]>
linksPosition
'center' | 'left' | 'right'
'center'
locales
Locale[]
activeLocaleId
string
localeAction
LocaleAction
currencies
Currency[]
activeCurrencyId
Streamable<string | undefined>
currencyAction
CurrencyAction
logo*
Streamable<string | { src: string; alt: string } | null>
logoWidth
number
200
logoHeight
number
40
logoHref
string
'/'
logoLabel
string
'Home'
mobileLogo
Streamable<string | { src: string; alt: string } | null>
mobileLogoWidth
number
100
mobileLogoHeight
number
`40
searchHref*
string
searchParamName
string
'query'
searchAction
SearchAction<S>
searchCtaLabel
string
searchInputPlaceholder
string
cartLabel
string
'Cart'
accountLabel
string
'Profile'
openSearchPopupLabel
string
'Open search popup'
searchLabel
string
'Search'
mobileMenuTriggerLabel
string
'Toggle navigation'

Actions

You can find the type defintions for the actions below.

type Action<State, Payload> = (  state: Awaited<State>,  payload: Awaited<Payload>,) => State | Promise<State>;type LocaleAction = Action<SubmissionResult | null, FormData>;type CurrencyAction = Action<SubmissionResult | null, FormData>;type SearchAction<S extends SearchResult> = Action<  {    searchResults: S[] | null;    lastResult: SubmissionResult | null;    emptyStateTitle?: string;    emptyStateSubtitle?: string;  },  FormData>;

This component uses Confom to handle form submissions. Refer to the Conform docs for more details.

Locale

PropTypeDefault
id*
string
label*
string

Currency

PropTypeDefault
id*
string
label*
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --nav-focus: var(--primary);  --nav-background: var(--background);  --nav-floating-border: color-mix(in oklab, var(--foreground) 10%, transparent);  --nav-link-text: var(--foreground);  --nav-link-text-hover: var(--foreground);  --nav-link-background: transparent;  --nav-link-background-hover: var(--contrast-100);  --nav-link-font-family: var(--font-family-body);  --nav-group-text: var(--foreground);  --nav-group-text-hover: var(--foreground);  --nav-group-background: transparent;  --nav-group-background-hover: var(--contrast-100);  --nav-group-font-family: var(--font-family-body);  --nav-sub-link-text: var(--contrast-500);  --nav-sub-link-text-hover: var(--foreground);  --nav-sub-link-background: transparent;  --nav-sub-link-background-hover: var(--contrast-100);  --nav-sub-link-font-family: var(--font-family-body);  --nav-button-icon: var(--foreground);  --nav-button-icon-hover: var(--foreground);  --nav-button-background: var(--background);  --nav-button-background-hover: var(--contrast-100);  --nav-menu-background: var(--background);  --nav-menu-border: color-mix(in oklab, var(--foreground) 5%, transparent);  --nav-mobile-background: var(--background);  --nav-mobile-divider: var(--contrast-100);  --nav-mobile-button-icon: var(--foreground);  --nav-mobile-link-text: var(--foreground);  --nav-mobile-link-text-hover: var(--foreground);  --nav-mobile-link-background: transparent;  --nav-mobile-link-background-hover: var(--contrast-100);  --nav-mobile-link-font-family: var(--font-family-body);  --nav-mobile-sub-link-text: var(--contrast-500);  --nav-mobile-sub-link-text-hover: var(--foreground);  --nav-mobile-sub-link-background: transparent;  --nav-mobile-sub-link-background-hover: var(--contrast-100);  --nav-mobile-sub-link-font-family: var(--font-family-body);  --nav-search-background: var(--background);  --nav-search-border: color-mix(in oklab, var(--foreground) 5%, transparent);  --nav-search-divider: color-mix(in oklab, var(--foreground) 5%, transparent);  --nav-search-icon: var(--contrast-500);  --nav-search-empty-title: var(--foreground);  --nav-search-empty-subtitle: var(--contrast-500);  --nav-search-result-title: var(--foreground);  --nav-search-result-title-font-family: var(--font-family-mono);  --nav-search-result-link-text: var(--foreground);  --nav-search-result-link-text-hover: var(--foreground);  --nav-search-result-link-background: var(--background);  --nav-search-result-link-background-hover: var(--contrast-100);  --nav-search-result-link-font-family: var(--font-family-body);  --nav-cart-count-text: var(--background);  --nav-cart-count-background: var(--foreground);  --nav-locale-background: var(--background);  --nav-locale-link-text: var(--contrast-400);  --nav-locale-link-text-hover: var(--foreground);  --nav-locale-link-text-selected: var(--foreground);  --nav-locale-link-background: transparent;  --nav-locale-link-background-hover: var(--contrast-100);  --nav-locale-link-font-family: var(--font-family-body);}