TopNav

The application's top bar — brand, sections and account in one row. The admin has no side menu; content below the bar runs full width.

When to use it

The frame of the admin. It is the only navigation a screen has — sections on top, content below them at full width.
A section with more than one screen. The section button opens an IngotMegaMenu, which is where the links are.
Telling the two products apart — a badge next to the brand says you are in the platform admin, not in a customer account.

When not to use it

An index of pages inside the content — documentation, help, a long settings flow. That is IngotSideNav: it is page content, not the application frame.
A section with a single screen. A button that opens a menu with one item is a step too many — make it a link.
A set of sections that will not fit at 1280 px with their labels. The bar does not wrap and whatever overflows falls off the edge — the measure is the narrowest supported width, not a fixed count. When the bar breaks, shorten labels or merge two sections.

Properties

brand: ReactNode — The brand on the left. A mode badge belongs here, not next to the sections.
sections: readonly IngotTopNavSection[] — The application's sections. All of them, labels included, must fit at 1280 px — the bar does not wrap.
openSection: string | null — The key of the open section. Controlled from outside: the caller knows when the menu closes.
onOpenSection: (key: string) => void — Open a section. Called on hover, click and keyboard (ArrowDown, Enter). A click never closes — hover opened the panel before the click landed, and a toggle would put it right out.
onCloseSection: () => void — Close the open section. The bar calls it after the pointer leaves (with a 120 ms delay so the path into the panel does not go dark), on a click outside the bar and on Escape; after a link click the caller calls it.
renderMenu: (key: string) => ReactNode — The open section's menu — typically IngotMegaMenu. Rendered into that section's relative wrapper, so the panel stands under its button.
menuButton: ReactNode — The mobile menu button — drawn leftmost, before the brand.
contentClassName: string — The inner row's class — the shell's frame goes here (mx-auto max-w, height, padding). The bar's border and surface stay with the kit.
sectionsLabel: string — A translated aria-label for the sections block — makes the bar a named navigation.
sectionsClassName: string — The sections wrapper's class — typically responsive hiding on mobile (hidden lg:flex), where the hamburger carries navigation.
sectionsEnd: ReactNode — After the last section, inside the navigation — e.g. a day-one “Unlock all”.
actions: ReactNode — Icon actions on the right, before the account — messages, notifications.
account: ReactNode — The account at the far right, typically IngotTopNavAccount.
children: ReactNode — The mega menu opened below the bar — it positions against it.