ComponentsLumos 0.0.2NewOpen component
NavLink
One link in the nav, which knows whether it is the page you are on.
NavLink is the link Nav is built from, pulled out into its own component in 0.0.2. It compares its href against the page being rendered and marks itself when they match — which is the part that is easy to leave out and awkward to add back.
It renders a list item, not a bare link, so it belongs inside a <ul> — which is how a screen reader is told how many links there are before it starts reading them.
<ul class="nav_links">
<NavLink href="/work">Work</NavLink>
<NavLink href="/about">About</NavLink>
</ul>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
hrefrequired | string | None | Where the link goes, and what is compared against the current URL to mark it. |
Anything else you pass — target, rel, class — goes through to the <a>. A NavLink with nothing inside it renders nothing at all.
What marking it does
The current link gets aria-current="page", which is what a screen reader announces, and the styling hangs off that same attribute rather than off a class of its own. There is no way for one to be true and the other not.
Trailing slashes are ignored on both sides of the comparison, so /about and /about/ are the same page — which they are, and which is otherwise a link that is never marked on a site configured the other way.