Page Header

  import PageHeader from '@devseed-ui/page-header';

Guidelines and examples

PageHeader is a styled header. You may pass in a child component such as a GlobalMenu to render a menu in the page header.

Example

A PageHeader containing a GlobalMenu is shown below as a list of GlobalMenuLink components.

<PageHeader title="Sample Title">
  <GlobalMenu>
    <li>
      <GlobalMenuLink
        exact
        to="/"
        useIcon="house"
        data-tip="Welcome"
        title="View Welcome page"
      >
        <span>Welcome</span>
      </GlobalMenuLink>
    </li>

    ...

  </GlobalMenu
</PageHeader>

  <DevseedUiThemeProvider>
    <PageHeaderWrapper>
      <PageHeader title="Sample Title">
        <GlobalMenu>
          <li>
            <GlobalMenuLink
              exact
              to="/"
              useIcon="house"
              data-tip="Welcome"
              title="View Welcome page"
            >
              <span>Welcome</span>
            </GlobalMenuLink>
          </li>
          <li>
            <GlobalMenuLink
              exact
              to="/explore"
              useIcon="map"
              data-tip="Explore"
              title="View Explore page"
            >
              <span>Explore</span>
            </GlobalMenuLink>
          </li>
          <li>
            <GlobalMenuLink
              exact
              to="/about"
              data-tip="About"
              useIcon="circle-information"
              title="View About page"
            >
              <span>About</span>
            </GlobalMenuLink>
          </li>

        </GlobalMenu>
      </PageHeader>
    </PageHeaderWrapper>
  </DevseedUiThemeProvider>

API Documentation

rows:
  - Prop name: "title"
    Type: "string"
    Description: "Sets the page header title"
    Default value: ""