Navbar

The top navigation bar — composes the Logo on the left and a row of Menu Items (with dropdowns) on the right. All values pulled directly from the LUSTER Figma component.

Logo bg #916DFF · Title #24242C · Menu item #24242C · Hover bg #F2EDFF · Padding 24px

Tip: hover a menu item to see the Menu Item hover state (#F2EDFF).

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. The Navbar composes the Logo and Menu Item components inside a section container. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

Token Name	Figma Variable	Default Value
--navbarBgColor	navbar/bg/color	#FFFFFF
--navbarItemListGap	navbar/item/list/gap	16px
--logoBgColor	logo/bg/color	#916DFF
--logoIconColor	logo/icon/color	#FFFFFF
--logoPaddingX	logo/padding/x	12px
--logoPaddingY	logo/padding/y	12px
--logoBorderRadius	logo/border/radius	0px
--logoItemsGap	logo/items/gap	16px
--logoTitleContent	logo/title/content	My Design System
--logoIconFontSize	typography/logo icon/font/size	20px
--logoIconFontLineHeight	typography/logo icon/font/lineHeight	22px
--sectionTitleFontColor	section/title/font/color	#24242C
--menuItemDefaultFontColor	menuItem/default/font/color	#24242C
--menuItemDefaultIconColor	menuItem/default/icon/color	#24242C
--menuItemDefaultBgColor	menuItem/default/bg/color	#FFFFFF
--menuItemHoverBgColor	menuItem/hover/bg/color	#F2EDFF
--menuItemGap	menuItem/gap	8px
--menuItemPaddingX	menuItem/padding/x	16px
--menuItemPaddingY	menuItem/padding/y	12px
--menuItemBorderRadius	menuItem/border/radius	0px
--sectionBgColor	section/bg/color	#FFFFFF
--sectionPaddingX	section/padding/x	24px
--sectionPaddingY	section/padding/y	24px
--sectionBorderRadius	section/border/radius	0px
--sectionShadowColor	section/shadow/color	#CECBDC
--sectionShadowOffsetX	section/shadow/offset-x	0px
--sectionShadowOffsetY	section/shadow/offset-y	0px
--sectionShadowBlur	section/shadow/blur	0px
--titleFontSize	typography/title/font/size	16px
--titleFontLineHeight	typography/title/font/lineHeight	19px
--titleFontWeight	typography/title/font/weight	700
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Keep the Logo on the left and primary navigation on the right.

✓ DO

Use a chevron on items that open a Menu Dropdown.

✗ DON'T

Don't overcrowd the bar — collapse extras under a "More" menu.

✗ DON'T

Don't restyle menu items — reuse the Menu Item component.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import { Logo, MenuItem } from '@luster/ui';
import './Navbar.css';

export const Navbar = ({ items }) => (
  <header className="navbar">
    <Logo variant="full" />
    <nav className="navbar__menu">
      {items.map(it => (
        <MenuItem key={it.label} label={it.label} icon={it.hasMenu ? <ChevronDown/> : null} />
      ))}
    </nav>
  </header>
);

/* Navbar tokens — Diamond brand, Light mode */
:root {
  /* navbar + section container */
  --navbarBgColor: #FFFFFF;        /* navbar/bg/color → background/section */
  --navbarItemListGap: 16px;       /* navbar/item/list/gap → Spacing/5xl */
  --sectionPaddingX: 24px; --sectionPaddingY: 24px;
  --sectionBorderRadius: 0px;
  --sectionShadowColor: #CECBDC; --sectionShadowOffsetX: 0px; --sectionShadowOffsetY: 0px; --sectionShadowBlur: 0px;
  --sectionTitleFontColor: #24242C;
  /* logo */
  --logoBgColor: #916DFF; --logoIconColor: #FFFFFF;
  --logoPaddingX: 12px; --logoPaddingY: 12px; --logoBorderRadius: 0px; --logoItemsGap: 16px;
  --logoIconFontSize: 20px; --logoIconFontLineHeight: 22px;
  /* menuItem */
  --menuItemDefaultFontColor: #24242C; --menuItemDefaultIconColor: #24242C;
  --menuItemDefaultBgColor: #FFFFFF; --menuItemHoverBgColor: #F2EDFF;
  --menuItemGap: 8px; --menuItemPaddingX: 16px; --menuItemPaddingY: 12px; --menuItemBorderRadius: 0px;
  /* Typography */
  --bodyFontFamily: 'Inter', sans-serif;
  --titleFontSize: 16px; --titleFontLineHeight: 19px; --titleFontWeight: 700;
  --bodyFontSize: 16px;  --bodyFontLineHeight: 19px;  --bodyFontWeight: 400;
}

.navbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navbarBgColor);
  padding: var(--sectionPaddingY) var(--sectionPaddingX);
  border-radius: var(--sectionBorderRadius);
}
.navbar__logo { display: flex; align-items: center; gap: var(--logoItemsGap); }
.navbar__logo-icon { background: var(--logoBgColor); color: var(--logoIconColor); padding: var(--logoPaddingY) var(--logoPaddingX); border-radius: var(--logoBorderRadius); }
.navbar__logo-title { font-family: var(--bodyFontFamily); font-weight: var(--titleFontWeight); font-size: var(--titleFontSize); line-height: var(--titleFontLineHeight); color: var(--sectionTitleFontColor); }
.navbar__menu { display: flex; align-items: center; gap: var(--navbarItemListGap); }
.navbar__menu .menu-item {
  display: flex; align-items: center; gap: var(--menuItemGap);
  padding: var(--menuItemPaddingY) var(--menuItemPaddingX);
  color: var(--menuItemDefaultFontColor);
  font-family: var(--bodyFontFamily); font-weight: var(--bodyFontWeight); font-size: var(--bodyFontSize); line-height: var(--bodyFontLineHeight);
  border-radius: var(--menuItemBorderRadius); cursor: pointer;
}
.navbar__menu .menu-item:hover { background: var(--menuItemHoverBgColor); }

<header class="navbar">
  <span class="logo"><!-- logo icon + title --></span>
  <nav class="navbar__menu">
    <button class="menu-item">Home</button>
    <button class="menu-item">Themes ▾</button>
    <button class="menu-item">More ▾</button>
  </nav>
</header>

import { Navbar } from '@luster/ui';

export default function App() {
  return (
    <Navbar
      items={[
        { label: 'Home' },
        { label: 'Themes', hasMenu: true },
        { label: 'More', hasMenu: true },
      ]}
    />
  );
}