SecondaryNavigation

Import statement

import { SecondaryNavigation, SecondaryNavigationTitle, BreadcrumbHome, BreadcrumbItem, Breadcrumb } from "@wfp/react"

SecondaryNavigation Component

The SecondaryNavigation component is used to display a page title and optionally, tab navigation. It provides a flexible way to structure the navigation elements and additional content in your application’s secondary navigation bar.

Example Usage

import {
  SecondaryNavigation,
  SecondaryNavigationTitle,
  Breadcrumb,
  BreadcrumbItem,
  Tabs,
  Tab,
} from "@wfp/react";

<SecondaryNavigation additional="Additional">
  <Breadcrumb>
    <BreadcrumbItem>
      <a href="/#">
        <BreadcrumbHome />
      </a>
    </BreadcrumbItem>
    <BreadcrumbItem href="#">
      Breadcrumb 2
    </BreadcrumbItem>
    <BreadcrumbItem disableLink>
      Breadcrumb 3
    </BreadcrumbItem>
  </Breadcrumb>
  <SecondaryNavigationTitle>
    The page title
  </SecondaryNavigationTitle>
  <Tabs customTabContent={true}>
    <Tab label="Tab label 1" href="#" />
    <Tab label="Tab label 2" href="#" />
    <Tab label="Tab label 3" href="#" />
  </Tabs>
</SecondaryNavigation>;

This example shows a secondary navigation bar with a large page width and a title. You can add more elements as children to customize the navigation bar further.

SecondaryNavigationTitle Component

The SecondaryNavigationTitle component is used within the SecondaryNavigation to display the title of the page or section.

Example Usage

import { SecondaryNavigationTitle } from "@wfp/react";

<SecondaryNavigationTitle className="custom-class">
  Page Title
</SecondaryNavigationTitle>;

In this example, the SecondaryNavigationTitle component is used to render a page title with an additional custom class.