Nav Layout

Overview

This package provides all navigation-related UI components in a single, centralized solution—ensuring a consistent and streamlined approach to navigation across your application.

It replaces the previous @nib-components/header, @nib-components/footer, @nib-components/header-footer-layout, and @nib/drawer packages, consolidating them into one unified package.

The new Header component supersedes both the legacy Header and PortalHeader, supporting navigation for both public websites and portal-style applications.

The Header and Footer have been redesigned with a focus on usability and flexibility, including support for a Mega Menu and other enhancements to layout and user experience.

A new Sidebar component has also been introduced, enabling sidebar-based navigation where appropriate.

Included components

• Header - Includes small and simplified versions, an off-canvas Drawer, and a MegaMenu.
• Footer - Includes a small variant and the AcknowledgementOfCountry component.
• Sidebar - A new component for sidebar navigation, designed to work with the same configuration as the Header.

Data-driven

The navigation components are designed to work with an external data source. In simple applications, this data can be local, but for consistency across multiple applications, it should come from a central source.

This externalization of data is a key difference from the old @nib-components/header, @nib-components/footer, and @nib-components/header-footer-layout packages. Variations are no longer hardcoded, allowing for greater maintainability and easier rollout of navigation updates.

For global navigation on the public nib website, data is sourced from the nav-data API. While this API currently exposes a single endpoint, it is designed to be extensible.

If your team needs to update the configuration, please raise a pull request in the repository.

RSC support

This package is the first to export React Server Components (RSC) alongside traditional client components. The RSC versions are designed for server-rendered applications, offering improved performance and SEO benefits.

These components include built-in data fetching, allowing them to retrieve navigation data directly from the API without needing to pass it as props. They're intended for use at build time and should be cached for subsequent requests.

If the navigation data is unavailable during your build, fallback data will be used. This fallback is generated at build time of the nav-layout package and reflects the data available at the time of publication. However, it may not include the latest updates from the nav-data API.

If you are sourcing navigation data from a different API, you can create your own RSC components that fetch the data as needed. The nav-layout package provides the necessary hooks and utilities to facilitate this.

Interoperability

The nav-layout components share a common configuration object, enabling consistent and reusable navigation logic across your UI. For example, the same configuration can power the Header, Sidebar, or Drawer. A Header using mega menus can be swapped for one with simple dropdowns by updating only the menu type.

While the config is shared, each component is optimized for specific information architectures (IA). Use the Sidebar for vertical navigation, the Header for top-level navigation, and prefer a mega menu if the Header needs to display many links.