Fusion UI

Overview

MainNavView is the top level navigation of an application: logo, menu items, search, context and account in one bar. It replaces the deprecated MenuBarView. This documentation uses it as well.

Up to maxBarItems (default: 3) menu items are shown in the bar. With more items, all of them move into a side menu that opens with the menu button.

File: main-nav-demo.tsx
"use client";

import React from "react";
import {
  AccountMenu,
  ApplicationSwitcher,
  ApplicationSwitcherMenu,
  ApplicationSwitcherMenuItem,
  CommandMenuTrigger,
  Container,
  IconLogoutBoxR,
  IconUserSettings,
  MainNavResponsive,
  MainNavView,
  StackLayout,
  Tile,
  TileContent,
  TileHeader,
} from "@brynlabs/fusion-ui";

const analytics: ApplicationSwitcherMenuItem = {id: "analytics", title: "Analytics"};

const applications: ApplicationSwitcherMenu = {
  sections: [
    {
      items: [
        analytics,
        {id: "billing", title: "Billing", href: "#billing"},
        {id: "support", title: "Support", href: "#support"},
      ],
    },
  ],
};

const Logo = ({compact}: {compact?: boolean}) => (
  <span className={"heading-4-font"}>{compact ? "A" : "Analytics"}</span>
);

export const MainNavDemo = () => (
  <MainNavView
    applicationSwitcher={<ApplicationSwitcher menu={applications} activeItem={analytics} />}
    logo={<MainNavResponsive full={<Logo />} compact={<Logo compact />} />}
    menuItems={[
      {title: "Overview", href: "/preview/main-nav"},
      {title: "Reports", href: "#reports"},
      {title: "Customers", href: "#customers"},
      {title: "Settings", href: "#settings"},
    ]}
    maxBarItems={5}
    pinnedActions={
      <MainNavResponsive full={<CommandMenuTrigger />} compact={<CommandMenuTrigger compact />} />
    }
    accountMenu={
      <AccountMenu
        name={"Jane Doe"}
        email={"jane@example.com"}
        accountActions={[
          {title: "Profile", icon: <IconUserSettings />, href: "#profile"},
          {title: "Sign out", icon: <IconLogoutBoxR />, href: "#sign-out"},
        ]}
      />
    }>
    <Container direction={"both"}>
      <StackLayout>
        <Tile>
          <TileHeader>Main Nav</TileHeader>
          <TileContent>
            Make the window narrower: menu items move into an overflow menu, then the logo and the
            search become compact, and finally everything moves into the side menu behind the menu
            button.
          </TileContent>
        </Tile>
        {Array.from({length: 8}, (_, index) => (
          <Tile key={index}>
            <TileHeader>Section {index + 1}</TileHeader>
            <TileContent>
              Scroll down to hide the bar, scroll up a little to show it again.
            </TileContent>
          </Tile>
        ))}
      </StackLayout>
    </Container>
  </MainNavView>
);

Slots

applicationSwitcher is rendered before the logo. contextSwitcher, actions and accountMenu (at the very end) are rendered in the bar, pinnedActions (e.g. a CommandMenuTrigger) always stay in the bar. Use MainNavResponsive to provide a full and a compact variant of the logo or the pinned actions.

<MainNavView
  applicationSwitcher={<ApplicationSwitcher menu={applications} activeItem={currentApplication} />}
  logo={<MainNavResponsive full={<Logo />} compact={<Logo compact />} />}
  menuItems={[
    {title: "Getting Started", href: "/"},
    {title: "Concepts", href: "/concepts"},
    {title: "Components", href: "/components", activePathRegex: "^/components.*"},
  ]}
  contextSwitcher={<ContextSwitcher />}
  pinnedActions={
    <MainNavResponsive full={<CommandMenuTrigger />} compact={<CommandMenuTrigger compact />} />
  }
  accountMenu={<AccountMenu name="John Doe" email="john@example.com" />}>
  {children}
</MainNavView>

Responsive behavior

When the bar runs out of space, it becomes more compact step by step instead of switching everything at once:

Menu items move into an overflow menu one by one, until only the first is left.
The logo switches to its compact variant.
The pinned actions switch to their compact variant.
applicationSwitcher, contextSwitcher, actions and accountMenu move into the side menu, which opens with the menu button.
The menu items move into the side menu.

The side menu covers the bar while it is open. It shows the applicationSwitcher and the compact logo with a close button, and contains everything of the bar. actions and accountMenu sit in its footer. Without menu items, the menu button opens the actions and the account menu.

The bar hides after scrolling down by 20px and comes back after scrolling up by 20px. Turn this off with hideOnScroll={false}.

A SideMenuView inside the MainNavView becomes part of its hierarchy: on phones it is hidden and opens with the same menu button. The menu button always opens the deepest menu; a button inside the side menu leads up to the main menu. Below that button, the side menu repeats the item of the main menu that leads to the current area. Only one side menu can be integrated.

Clicking a menu item that leads to a page with a side menu keeps the menu open and shows the lower level. Any other menu item closes the menus.

Adapting components to their placement

Components passed as contextSwitcher, actions or accountMenu can end up in the bar or in the side menu. Render different variants with MainNavAdaptive, or read the placement with useMainNavPlacement(), which returns "bar", "menu" or undefined.

<MainNavView
  actions={
    <MainNavAdaptive
      bar={<CommandMenuTrigger />}
      menu={<Button fullWidth primaryIcon={<IconSearch />}>Search</Button>}
    />
  }>
  {children}
</MainNavView>

// or
const ContextSwitcher = () => {
  const placement = useMainNavPlacement();
  return <Select fullWidth={placement === "menu"} ... />;
};

Main Nav

Overview

Slots

Responsive behavior

Integrated side menu

Adapting components to their placement