React Corporate Navbar
Three navbar variants in the language of Intel, Synopsys, Siemens, and IBM-class websites, sharing one NavSearch dropdown search with grouped, filterable suggestions.
Dark double-row
Deep-blue double-row: a slim utility bar (secondary links, language selector, sign-in) above the main row, with the electric accent underline, an expanding search, and an outline CTA.
Focus the search and type reg to see the grouped suggestions dropdown.
Light single-row
The simple version: white surface, hairline bottom border, inline search, ghost sign-in, primary CTA.
Inline search with the same grouped dropdown; primary CTA on the light surface.
Product bar with tabs
A product-page bar: brand + product name, utility links, and a secondary tab row for Overview / Specifications / Documentation.
Click the tabs — the secondary row keeps its own active state.
Installation
Usage
Design notes
- The deep blue is deliberate — a
#00001autility row over thedeeptoken surface (#000028), with the electricaccent-boldunderline (#00ffb9): the Siemens-class pairing of near-black blue and a vivid accent that only ever appears on deep surfaces. The bar keeps its identity on any page background. - Utility row conventions — right-aligned small links, a hairline divider, then globe/language and sign-in. That ordering is what enterprise visitors expect.
- NavSearch panel stays light in both variants — floating panels belong to the page, not the bar, so suggestions render on the standard popover surface.
- Active state is an underline, not a pill — consistent with the rest of Kelvin UI and with every reference site.
Props
NavbarDark / NavbarLight
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Kelvin UI" | Brand name |
| logo | React.ReactNode | — | Logo mark |
| links | NavLink[] | — | { label, href, active? } main links |
| utilityLinks | NavLink[] | [] | Top utility-row links (dark variant only) |
| cta | { label, href } | — | Call-to-action button |
| searchGroups | NavSearchGroup[] | — | Enables the dropdown search when provided |
NavbarTabbed
| Prop | Type | Default | Description |
|---|---|---|---|
| product | string | — | Product name next to the brand |
| tabs | string[] | — | Secondary tab row labels |
| defaultTab | string | tabs[0] | Initially active tab |
| onTabChange | (tab: string) => void | — | Called when a tab is selected |
| utilityLinks | NavLink[] | [] | Right-side links in the product row |
NavSearch
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | NavSearchGroup[] | — | { title, items: { label, href?, meta? }[] } groups |
| placeholder | string | "Search…" | Input placeholder |
| variant | 'light' \ | 'dark' | 'light' |