nabs-ui-shell

Reusable React app shell for the Nabs UI library.

Usage

import { Shell, Button } from "@net-advantage/nabs-ui-shell";

export function Example() {
  return (
    <Shell
      header={<div>Header content</div>}
      navigation={<nav>Navigation</nav>}
      footer={<div>Footer content</div>}
    >
      <main>Main content</main>
    </Shell>
  );
}

The shell package re-exports all Nabs UI control modules so your project can use a single package dependency and import surface.

This includes path-aware Navigation behavior from nabs-ui-navigation:

• Use path on navigation items to update the browser URL without a full page reload.
• Navigation can auto-select active items by matching window.location.pathname.
• Set syncActivePath={false} to disable automatic active matching.

Branding

Use the Branding component to render a standard logo + title + byline lockup for shell headers.

import { Branding } from "@net-advantage/nabs-ui-shell";
import launchpadLogo from "./assets/net-advantage-logo-launch.svg";

export function HeaderBranding() {
  return (
    <Branding
      logo={<img src={launchpadLogo} alt="" aria-hidden="true" />}
      title="NABS UI Workbench"
      byline="NABS Launchpad"
    />
  );
}

Branding props

• logo: React node rendered on the left.
• title: React node rendered above the byline.
• byline: React node rendered below the title.
• className and other standard div attributes are also supported.

Navigation With Paths

import { Navigation } from "@net-advantage/nabs-ui-shell";

<Navigation
  direction="vertical"
  textAlignment="left"
  items={[
    { id: "home", label: "Home", path: "/home" },
    { id: "components", label: "Components", path: "/components" },
    { id: "settings", label: "Settings", path: "/settings" },
  ]}
  onItemSelect={(id) => console.log("selected", id)}
/>

If the current URL path already matches one of the configured path values, that item is selected automatically.

Props

• header renders the shell header area.
• navigation renders the primary side navigation.
• footer renders the shell footer area.
• children renders the main content area.

The shell composes the nabs-ui-layout control and uses bundled package CSS for its presentation styles. Header and footer height are driven by their content, so they stay static around the main content area.

The shell also provides default semantic typography sizing for plain content inside the shell content region (h1-h6, p, li, ul, ol). If needed, customize the scale with CSS variables such as --nabs-ui-shell-h1-font-size and --nabs-ui-shell-body-font-size. List styles are also restored by default (disc for ul, decimal for ol) and marker contrast can be customized with --nabs-ui-shell-list-marker-color. Links inside shell content are theme-aware by default and can be customized with --nabs-ui-shell-link-color, --nabs-ui-shell-link-hover-color, and --nabs-ui-shell-link-visited-color.

Verification

Use the dedicated typography page in the workbench to validate shell defaults without app-level overrides:

• src/nabs-workbench/src/pages/TypographyContrastPage.tsx renders plain typography elements (h1, h2, h3, p, a, ul) without explicit text-color utility classes.
• src/nabs-workbench/src/WorkbenchApp.tsx renders Shell without a shell-level text/background override class, and the contrast check is isolated to the dedicated page.

When switching between light and dark themes in the workbench:

• The shell should fill the viewport with header at the top, content in the middle, and footer at the bottom.
• Plain typography inside shell content should inherit theme-correct contrast from shell defaults.