Mobile Nav · Sapphire UI

Expose site navigation in a compact mobile menu. Use it when the full link list cannot fit beside the brand at narrow widths.

Examples

Links

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom radix-ui

"use client";
import { MobileNav, type MobileNavItem } from "@kongmy-dev/sapphire-ui/mobile-nav";

function MobileNavLinks() {
  return (
    <MobileNav
      brandName="Sapphire"
      brandSuffix="UI"
      version="v4"
      pathname="/overview"
      navItems={
        [
          {
            href: '/overview',
            label: 'Overview',
            icon: (
              <svg
                aria-hidden="true"
                className="sp-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="m3 10 9-7 9 7v11H3Z" />
              </svg>
            ),
          },
          { href: '#mobile-guide', label: 'Guide' },
        ] satisfies readonly MobileNavItem[]
      }
      extraActions={
        <form onSubmit={(event) => event.preventDefault()}>
          <label>
            Search navigation
            <input type="search" className="sp-input" data-variant="on-dark" />
          </label>
          <button type="submit" className="sp-button" data-variant="outline">
            Search
          </button>
        </form>
      }
    />
  );
}

export default MobileNavLinks;

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Router

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom radix-ui

"use client";
import { useState } from "react";
import { Container } from "@kongmy-dev/sapphire-ui/container";
import { MobileNav } from "@kongmy-dev/sapphire-ui/mobile-nav";

function MobileNavRouter() {
  const [pathname, setPathname] = useState('/projects');
  return (
    <>
      <MobileNav
        brandName="Workspace"
        pathname={pathname}
        navItems={[
          { href: '/projects', label: 'Projects' },
          {
            href: '/settings',
            label: 'Settings',
            active: pathname === '/settings',
          },
        ]}
        toggleLabel="Open workspace navigation"
        closeLabel="Close workspace navigation"
        onNavigate={(href, event) => {
          event.preventDefault();
          setPathname(href);
        }}
      />
      <Container padding="lg">
        <output>Current route: {pathname}</output>
      </Container>
    </>
  );
}

export default MobileNavRouter;

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Props

Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.

MobileNav

MobileNav component props
Prop	Type	Required	Local default
`brandName`	`string`	Yes	—
`brandSuffix`	`string \| undefined`	No	`''`
`version`	`string \| undefined`	No	`''`
`navItems`	`readonly MobileNavItem[]`	Yes	—
`extraActions`	`ReactNode`	No	—
`pathname`	`string \| undefined`	No	—
`onNavigate`	`((href: string, event: MouseEvent<HTMLAnchorElement>) => void) \| undefined`	No	—
`toggleLabel`	`string \| undefined`	No	`'Toggle navigation menu'`
`closeLabel`	`string \| undefined`	No	`'Close navigation menu'`

MobileNavItem

Supporting type used by this API.

MobileNavItem component props
Prop	Type	Required	Local default
`href`	`string`	Yes	—
`label`	`string`	Yes	—
`icon`	`ReactElement<unknown, string \| import("react").JSXElementConstructor<any>> \| undefined`	No	—
`active`	`boolean \| undefined`	No	—

Setup

bun add @kongmy-dev/sapphire-ui react react-dom radix-ui

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import { MobileNav } from "@kongmy-dev/sapphire-ui/mobile-nav";

Mixing package and vendored components? Follow application setup.