Navigation · Youj

Installation & usage

npx @youj/cli add marketing-navbar

Also installs accordion, app-header, avatar, badge, button, collapse, command, command-palette, dropdown-menu, icon-arrow-right, icon-bar-chart, icon-book-open, icon-briefcase, icon-building, icon-code, icon-credit-card, icon-database, icon-git-branch, icon-globe, icon-history, icon-layout-dashboard, icon-life-buoy, icon-log-out, icon-megaphone, icon-rocket, icon-search, icon-settings, icon-shield-check, icon-shopping-bag, icon-sparkles, icon-terminal, icon-users, icon-x, mega-menu, navigation-menu, sparkline, youj-core, youj-ui-core.

The CLI copies the block to blocks/marketing/navbar.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

marketingNavbar-view.tsx

'use client'

import Link from 'next/link'
import { MarketingNavbar, type MarketingNavbarProps } from '@/blocks/marketing/navbar'

export function MarketingNavbarView({ links, brand, accountLinks, searchItems }: Pick<MarketingNavbarProps, 'links' | 'brand' | 'accountLinks' | 'searchItems'>) {
  return (
    <MarketingNavbar
      links={links}
      brand={brand}
      accountLinks={accountLinks}
      searchItems={searchItems}
      copy={{ navLabel: 'Main' }}
      linkComponent={Link}
      onMenuChange={(menu) => {
        // your code
      }}
      onDismissAnnouncement={() => {
        // your code
      }}
      onSignOut={() => {
        // your code
      }}
    />
  )
}

Building an app rather than a site? Its navigation and the rest of its chrome are built in Create: a sidebar, a top bar with breadcrumbs, search or tabs, the workspace switcher, notifications and the account menu, with the screens you add as the pages of its nav.

Reference

Props22 props, 11 types

Props

MarketingNavbar props
Prop	Type	Default
`current`	`string` The link of the page being shown, marked as current; the trigger of the menu holding it carries a dot.	–
`menu`	`string \| null` The open mega menu's label, `null` for none, to control it (close it on a route change, say).	–
`defaultMenu`	`string \| null` The mega menu open at first, when uncontrolled. Default: none.	–
`onMenuChange`	`(menu: string \| null) => void` Called with the label of the menu that opens, or `null` as it closes.	–
`sticky`	`boolean` Stick to the top and condense on scroll. default true	`true`
`scrollContainer`	`RefObject<HTMLElement \| null>` The element that scrolls under the bar. Default: the page.	–
`links`	`MarketingNavbarItem[]` The top-level entries, in order: plain links and mega menus. default the demo's Product, Solutions, Resources, Customers and Pricing	`the demo's Product, Solutions, Resources, Customers and Pricing`
`brand`	`MarketingNavbarBrand` The product's name, logo and home link. default the demo's Northwind	`the demo's Northwind`
`announcement`	`MarketingNavbarAnnouncement \| null` The bar above the header; `null` hides it. default the demo's launch notice	`the demo's launch notice`
`onDismissAnnouncement`	`() => void` The announcement was dismissed (the visitor's choice to remember is yours).	–
`user`	`MarketingNavbarUser \| null` The signed-in person: the bar shows the dashboard button and the account menu instead of the sign-in calls to action. default null	`null`
`accountLinks`	`MarketingNavbarAccountLink[]` The account menu's pages above Sign out. default Dashboard, Billing and Settings	`Dashboard, Billing and Settings`
`onSignOut`	`() => void` Called when the visitor chooses Sign out.	–
`dashboardCta`	`MarketingNavbarCta \| null` The signed-in button on the bar; `null` hides it. default Dashboard → `#dashboard`	Dashboard → `#dashboard`
`primaryCta`	`MarketingNavbarCta \| null` The solid call to action when signed out, on the bar from `md` and first in the drawer; `null` hides it. default Start free → `#signup`	Start free → `#signup`
`secondaryCta`	`MarketingNavbarCta \| null` The quiet call to action beside it; `null` hides it. default Sign in → `#login`	Sign in → `#login`
`search`	`boolean` Show the ⌘K search. default true	`true`
`searchItems`	`MarketingNavbarSearchItem[]` Pages the search finds beyond the menus' links. default Pricing, Customers, Security and Contact	`Pricing, Customers, Security and Contact`
`onSearchSelect`	`(item: MarketingNavbarSearchItem) => void` Called when a search result is chosen. Default: go to its `href`.	–
`actions`	`ReactNode` Extra controls on the inline end, before the search (a theme toggle, a GitHub star count).	–
`linkComponent`	`LinkComponent` The element every internal link renders as, e.g. Next.js `Link`. default 'a'	`'a'`
`copy`	`Partial<MarketingNavbarCopy>` Any of the block's strings, to rewrite or translate.	–

`MarketingNavbarItem`

MarketingNavbarItem props
Prop	Type	Default
`label`Required	`string`	–
`href`	`string` A plain link's target.	–
`groups`	`MarketingNavbarGroup[]` A mega menu's columns.	–
`featured`	`{ href: string; title: string; eyebrow?: string; description?: string }` A strip under the mega menu's columns: a launch, a case study, "See everything".	–
`cards`	`MarketingNavbarCard[]` Media cards in the menu's last column, in place of the preview.	–
`icon`	`ReactNode` A plain link's glyph in the drawer.	–
`badge`	`string` A plain link's tag in the drawer.	–

`MarketingNavbarGroup`

MarketingNavbarGroup props
Prop	Type	Default
`title`Required	`string`	–
`links`Required	`MarketingNavbarLink[]`	–

`MarketingNavbarLink`

MarketingNavbarLink props
Prop	Type	Default
`label`Required	`string`	–
`href`Required	`string`	–
`icon`	`ReactNode` A 16px glyph.	–
`description`	`string` One line under the label.	–
`badge`	`string` A small tag after the label ("New", "Beta").	–
`preview`	`MarketingNavbarPreview` What the menu's preview card shows while this link is hovered or focused.	–

`MarketingNavbarCard`

MarketingNavbarCard props
Prop	Type	Default
`href`Required	`string`	–
`title`Required	`string`	–
`eyebrow`	`string` A small line above the title ("Blog").	–
`meta`	`string` A line under the title ("6 min read").	–
`media`	`ReactNode` The card's picture. Decorative. Default: a tinted wash.	–

`MarketingNavbarPreview`

MarketingNavbarPreview props
Prop	Type	Default
`media`	`ReactNode` A picture of the thing; default a tinted wash.	–
`title`	`string` Default: the link's label.	–
`description`	`string` Default: the link's description.	–

`MarketingNavbarCta`

MarketingNavbarCta props
Prop	Type	Default
`label`Required	`string`	–
`href`Required	`string`	–
`onClick`	`MouseEventHandler<HTMLAnchorElement>`	–

`MarketingNavbarBrand`

MarketingNavbarBrand props
Prop	Type	Default
`name`Required	`string`	–
`logo`	`ReactNode`	–
`href`	`string`	–

`MarketingNavbarAnnouncement`

MarketingNavbarAnnouncement props
Prop	Type	Default
`label`Required	`string` The message: "Northwind 2.0 is here".	–
`href`Required	`string`	–
`badge`	`string` A pill before the message ("New").	–
`cta`	`string` The link's own words after the message ("Read the launch post").	–

`MarketingNavbarUser`

MarketingNavbarUser props
Prop	Type	Default
`name`Required	`string`	–
`email`	`string`	–
`avatar`	`string` A photo's URL; initials otherwise.	–

`MarketingNavbarAccountLink`

MarketingNavbarAccountLink props
Prop	Type	Default
`label`Required	`string`	–
`href`Required	`string`	–
`icon`	`ReactNode`	–

`MarketingNavbarSearchItem`

MarketingNavbarSearchItem props
Prop	Type	Default
`id`Required	`string`	–
`label`Required	`string`	–
`href`Required	`string`	–
`group`	`string` The palette group it sits under.	–
`keywords`	`string[]` More words it's found by.	–

Strings14 keys for copy

Built from12 components

Accessibilitylandmarks, menus, focus, keyboard, motion

Accessibility

Every header is a <header> landmark holding a labelled nav, and the page being shown is marked with aria-current="page"; the Floating bar marks the section in view with aria-current="true". Each starts with a skip link to your content (skipTo, #content by default), hidden until it takes keyboard focus. Links and buttons are real a and button elements with the kit's focus ring.

The Mega menu and the Store's departments are built on the kit's navigation menu, and the version and region menus on its menu: Enter, Space or ↓ opens one, Tab moves through a panel's links and the arrow keys through a menu's items, and Escape closes it and returns focus to its trigger. The previews and pictures beside the links are decorative, so the link's own words carry the meaning. ⌘K or Ctrl+K opens the Mega menu's and the Docs search from anywhere; the search palettes are dialogs whose results are a listbox you move through with the arrow keys.

The Fullscreen menu is a modal dialog named Menu. Opened from the keyboard, focus lands on its first entry; a level that drills in is a group named after its parent, focus moves to its first entry, and Back returns focus to the entry it came from. Escape closes it from any level and focus returns to Menu. The phone drawers of the Mega menu, Docs and Store are modal sheets that trap focus and return it to their button. The Floating bar's phone menu is a disclosure: its button carries aria-expanded, Escape or a press outside folds it, and focus goes back to the button.

The Floating bar hides as you scroll down, never while focus or its menu is inside it, and never under reduced motion. With reduced motion every header keeps its states (condensed, current, open) and shows them at once: nothing glides, rises or slides.

Footer is a <footer> landmark with a labelled nav whose link groups sit under h2 headings. The newsletter field has a label, and the result of signing up is announced in a status region. The language switch and trust badges are labelled.

#Installation & usage

#Description

#Code

#Reference

Props

MarketingNavbarItem

MarketingNavbarGroup

MarketingNavbarLink

MarketingNavbarCard

MarketingNavbarPreview

MarketingNavbarCta

MarketingNavbarBrand

MarketingNavbarAnnouncement

MarketingNavbarUser

MarketingNavbarAccountLink

MarketingNavbarSearchItem

Strings

Built from

Components used

#Accessibility