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
type | default value | ||
---|---|---|---|
optional | id | string | inferred from native id or title , fallback to nav |
optional | normalizeId | boolean | true |
info
- When the
id
attribute is omitted, we attempt to infer it from one of the elements' native props:id
ortitle
.
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.