You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/components/nav-link.md
+104-50
Original file line number
Diff line number
Diff line change
@@ -5,66 +5,120 @@ toc: false
5
5
6
6
# `<NavLink>`
7
7
8
-
A `<NavLink>` is a special kind of `<Link>` that knows whether or not it is "active". This is useful when building a navigation menu, such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
9
-
10
-
By default, an `active` class is added to a `<NavLink>` component when it is active. You can pass a function as children to customize the content of the `<NavLink>` component based on their active state, specially useful to change styles on internal elements.
8
+
A `<NavLink>` is a special kind of `<Link>` that knows whether or not it is "active" or "pending". This is useful when building a navigation menu, such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
11
9
12
10
```tsx
13
11
import { NavLink } from"@remix-run/react";
14
12
15
-
function NavList() {
16
-
// This styling will be applied to a <NavLink> when the
17
-
// route that it links to is currently selected.
18
-
const activeStyle = {
19
-
textDecoration: "underline",
20
-
};
21
-
const activeClassName ="underline";
22
-
return (
23
-
<nav>
24
-
<ul>
25
-
<li>
26
-
<NavLink
27
-
to="messages"
28
-
style={({ isActive }) =>
29
-
isActive?activeStyle:undefined
30
-
}
31
-
>
32
-
Messages
33
-
</NavLink>
34
-
</li>
35
-
<li>
36
-
<NavLink
37
-
to="tasks"
38
-
className={({ isActive }) =>
39
-
isActive?activeClassName:undefined
40
-
}
41
-
>
42
-
Tasks
43
-
</NavLink>
44
-
</li>
45
-
<li>
46
-
<NavLinkto="tasks">
47
-
{({ isActive }) => (
48
-
<span
49
-
className={
50
-
isActive?activeClassName:undefined
51
-
}
52
-
>
53
-
Tasks
54
-
</span>
55
-
)}
56
-
</NavLink>
57
-
</li>
58
-
</ul>
59
-
</nav>
60
-
);
13
+
<NavLink
14
+
to="/messages"
15
+
className={({ isActive, isPending }) =>
16
+
isPending?"pending":isActive?"active":""
17
+
}
18
+
>
19
+
Messages
20
+
</NavLink>;
21
+
```
22
+
23
+
## Default `active` class
24
+
25
+
By default, an `active` class is added to a `<NavLink>` component when it is active so you can use CSS to style it.
26
+
27
+
```tsx
28
+
<navid="sidebar">
29
+
<NavLinkto="/messages" />
30
+
</nav>
31
+
```
32
+
33
+
```css
34
+
#sidebara.active {
35
+
color: red;
61
36
}
62
37
```
63
38
64
-
If the `end` prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use:
39
+
## `className`
40
+
41
+
The `className` prop works like a normal className, but you can also pass it a function to customize the classNames applied based on the active and pending state of the link.
42
+
43
+
```tsx
44
+
<NavLink
45
+
to="/messages"
46
+
className={({ isActive, isPending }) =>
47
+
isPending?"pending":isActive?"active":""
48
+
}
49
+
>
50
+
Messages
51
+
</NavLink>
52
+
```
53
+
54
+
## `style`
55
+
56
+
The `style` prop works like a normal style prop, but you can also pass it a function to customize the styles applied based on the active and pending state of the link.
57
+
58
+
```tsx
59
+
<NavLink
60
+
to="/messages"
61
+
style={({ isActive, isPending }) => {
62
+
return {
63
+
fontWeight: isActive?"bold":"",
64
+
color: isPending?"red":"black",
65
+
};
66
+
}}
67
+
>
68
+
Messages
69
+
</NavLink>
70
+
```
71
+
72
+
## `children`
73
+
74
+
You can pass a render prop as children to customize the content of the `<NavLink>` based on the active and pending state, which is useful to change styles on internal elements.
The `end` prop changes the matching logic for the `active` and `pending` states to only match to the "end" of the NavLinks's `to` path. If the URL is longer than `to`, it will no longer be considered active.
87
+
88
+
Without the end prop, this link is always active because every URL matches `/`.
89
+
90
+
```tsx
91
+
<NavLinkto="/">Home</NavLink>
92
+
```
93
+
94
+
To match the URL "to the end" of `to`, use `end`:
65
95
66
96
```tsx
67
97
<NavLinkto="/"end>
68
98
Home
69
99
</NavLink>
70
100
```
101
+
102
+
Now this link will only be active at `"/"`. This works for paths with more segments as well:
When a `NavLink` is active it will automatically apply `<a aria-current="page">` to the underlying anchor tag. See [aria-current][aria-current] on MDN.
0 commit comments