Theme Playground

Layout

UtilityNav

Utility-level navigation strip for support, stores, account-adjacent links, and similar low-priority chrome content inside the StoreHeader family.

Best for

support and service linksutility chromesecondary header navigation

Import

import { UtilityNav } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use UtilityNav when links belong to the shell, but not to the main browse system.

Typical content:

  • store locator
  • support or contact
  • project or trade links
  • region or account-adjacent helpers rendered nearby

Composition notes

UtilityNav is intentionally small:

  • UtilityNav — root wrapper
  • UtilityNav.Group — optional cluster wrapper
  • UtilityNav.Link — utility link primitive

Keep it focused on the secondary shell layer. If a link owns the main browse or category entry, move it to PrimaryNav instead.

Examples

Live examples you can edit directly in the sandbox.

1 example

Utility navigation row

Use UtilityNav for low-priority shell links that sit above or beside the primary browse navigation.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
classNamestring
No description yet.