TrackedNav

Generates a <nav> Element wrapped in a NavigationContext identified as nav, unless differently specified. 

TrackedNav: (props: {
  objectiv?: {
    id?: string,
    normalizeId?: boolean,
  }
}) => <nav>

objectiv prop attributes​

typedefault value
optionalidstringinferred from native id or title, fallback to nav
optionalnormalizeIdbooleantrue
info
  • When the id attribute is omitted, we attempt to infer it from one of the elements' native props: id or title.

If that fails, we fallback to nav.

Returns​

<nav>

Automatic Events​

None.

Usage example​

import { TrackedNav } from '@objectiv/tracker-react';

<div>
  <header>
    ...
    <TrackedNav>
      <a href={'/'}>Homepage</a>
      <a href={'/about'}>About us</a>
      <a href={'/product'}>The Product</a>
    </TrackedNav>
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
  <aside>
    <TrackedNav id={'Footer Navigation'}>
      <a href={'/'}>Homepage</a>
      <a href={'/privacy'}>Privacy</a>
    </TrackedNav>
    <TrackedNav objectiv={{ id: 'Secondary Footer' }}>
      <a href={'/contact'}>Contact</a>
      <a href={'/blog'}>Blog</a>
    </TrackedNav>
  </aside>
</div>

By default, all Tracked Elements automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option:

import { TrackedNav } from '@objectiv/tracker-react';

<div>
  <TrackedNav objectiv={{ id: 'Main Navigation', normalizeId: false }}>
    ...
  </TrackedNav>
</div>

Did you know ?

TrackedNav internally uses TrackedNavigationContext.


See also