Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/layout/utility-nav.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=UtilityNav.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes