TopNav

TopNav is the primary, header level navigation for a web site or application. It contains the root level pages, user logins, and the site title. The main navigation should be hidden on screen sizes smaller than the size of the navigation.

Import Syntax

xxxxxxxxxx

import TopNav, {

  TopNavBrand,

  TopNavTitle,

  TopNavList,

  TopNavLink,

  TopNavActionsList

} from 'calcite-react/TopNav'

Basic Usage

ArcGIS for Developers

Sign InSign Up

15

 

1

<TopNav>

2

  <TopNavBrand href="#" src={EsriLogo} />

3

  <TopNavTitle href="#">ArcGIS for Developers</TopNavTitle>

4

  <TopNavList>

5

    <TopNavLink href="#" active>

6

      Plans

7

    </TopNavLink>

8

    <TopNavLink href="#">Community</TopNavLink>

9

    <TopNavLink href="#">Docs</TopNavLink>

10

  </TopNavList>

11

  <TopNavActionsList>

12

    <TopNavLink href="#">Sign In</TopNavLink>

13

    <Button clear>Sign Up</Button>

14

  </TopNavActionsList>

15

</TopNav>

With React Router

Using React Router with Calcite React components is straight-forward. Pass the router component class to the as prop on whatever component needs the functionality provided by router. Props assigned to the Calcite component will be inherited by the underlying router component.

xxxxxxxxxx

import { NavLink } from 'react-router-dom'

...

<TopNav>

  <TopNavBrand href="#" src={EsriLogo} />

  <TopNavTitle href="#">ArcGIS for Developers</TopNavTitle>

  <TopNavList>

    <TopNavLink as={NavLink} to="/plans">

      Plans

    </TopNavLink>

    <TopNavLink as={NavLink} to="/community">Community</TopNavLink>

    <TopNavLink as={NavLink} to="/docs">Docs</TopNavLink>

  </TopNavList>

  <TopNavActionsList>

    <TopNavLink href="#">Sign In</TopNavLink>

    <Button clear>Sign Up</Button>

  </TopNavActionsList>

</TopNav>

Props

TopNav default

TopNavBrand

TopNavTitle

TopNavList

TopNavLink

TopNavActionsList