MobileTopBar

Server component, no client JS

ImportCopy Anchor Link

import { MobileTopBar } from '@nizivo/react/mobile-top-bar';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/mobile-top-bar.css';

Static or interactiveCopy Anchor Link

Server. It is a layout with slots and ships no client JavaScript of its own; the example's IconButtons bring their tooltip's. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

SlotsCopy Anchor Link

• mark: Figma's 32 px Store mark, an initial or a logo image.
• leading: in place of mark, for example a back link on a detail page.
• title: the page's name in Heading/H4's look, with an ellipsis when long. As in the TopBar, it is text, not a heading.
• actions: IconButtons, usually search and notifications. Figma draws bare 20 px icons there; a button gives each a name and a 44 px target under a touch pointer.

Hooks: --nz-mobile-top-bar-padding-inline, --nz-mobile-top-bar-bg, --nz-mobile-top-bar-border, --nz-mobile-top-bar-mark-bg.

ExamplesCopy Anchor Link

import type { JSX, ReactNode } from 'react';
import { IconButton } from '@nizivo/react/icon-button';
import { MobileTopBar } from '@nizivo/react/mobile-top-bar';

/** Stands in for an `@nizivo/icons` glyph (20 px Lucide strokes). */
function Glyph({ children }: { children: ReactNode }): JSX.Element {
  return (
    <svg
      viewBox="0 0 24 24"
      width="1em"
      height="1em"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.92}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

const ICONS = {
  search: (
    <Glyph>
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </Glyph>
  ),
  bell: (
    <Glyph>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0M3.26 15.33A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.41 13.96 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.41 5.96-2.74 7.33" />
    </Glyph>
  ),
};

export function MobileTopBarExample(): JSX.Element {
  return (
    <MobileTopBar
      mark="M"
      title="Overview"
      actions={
        <>
          <IconButton icon={ICONS.search} label="Search" variant="tertiary" />
          <IconButton icon={ICONS.bell} label="Notifications, 3 unread" variant="tertiary" />
        </>
      }
    />
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

MobileTopBarProps type

import type { MobileTopBarProps } from '@nizivo/react/mobile-top-bar'

The props of MobileTopBar, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-mobile-top-bar, .nz-mobile-top-bar-actions, .nz-mobile-top-bar-mark, .nz-mobile-top-bar-title.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: Figma node 764:3397