| 1 | ---
|
| 2 | title: Nav Link
|
| 3 | storybookPath: navigation-navlink--default
|
| 4 | isExperimentalPackage: true
|
| 5 | ---
|
| 6 |
|
| 7 | Nav links are styled links for use in site navigation.
|
| 8 |
|
| 9 | ```jsx live
|
| 10 | <Stack as="nav" gap="small">
|
| 11 | <NavLink href="#" isSelected>
|
| 12 | <HomeIcon />
|
| 13 | Dashboard
|
| 14 | </NavLink>
|
| 15 | <NavLink href="#">
|
| 16 | <ClipboardListIcon />
|
| 17 | Applications
|
| 18 | </NavLink>
|
| 19 | <NavLink href="#">
|
| 20 | <BriefcaseIcon />
|
| 21 | Leads
|
| 22 | </NavLink>
|
| 23 | <NavLink href="#">
|
| 24 | <AcademicCapIcon />
|
| 25 | Training
|
| 26 | </NavLink>
|
| 27 | <NavLink href="#">
|
| 28 | <ChartSquareBarIcon />
|
| 29 | Analytics
|
| 30 | </NavLink>
|
| 31 | <NavLink href="#">
|
| 32 | <CogIcon />
|
| 33 | Settings
|
| 34 | </NavLink>
|
| 35 | </Stack>
|
| 36 | ```
|
| 37 |
|
| 38 | ## Children
|
| 39 |
|
| 40 | Valid children of a `NavLink` are a string, or a string plus an icon. No other
|
| 41 | combinations are allowed.
|
| 42 |
|
| 43 | ## Border Radius
|
| 44 |
|
| 45 | There are two valid border radii for a `NavLink`: `'small'` and `'full'`.
|
| 46 | Typically `'small'` should be used for vertical navigations (like a sidebar) and
|
| 47 | `'full'` should be used for horizontal navigations like in a header.
|
| 48 |
|
| 49 | ```jsx live
|
| 50 | <Stack gap="large">
|
| 51 | <Text weight="semibold">
|
| 52 | Hover or focus to see the different border radius options
|
| 53 | </Text>
|
| 54 | <Stack as="nav" gap="small">
|
| 55 | <NavLink href="#">"Small" border radius nav item</NavLink>
|
| 56 | <NavLink href="#" borderRadius="full">
|
| 57 | "Full" border radius nav item
|
| 58 | </NavLink>
|
| 59 | </Stack>
|
| 60 | </Stack>
|
| 61 | ```
|
| 62 |
|
| 63 | ## isSelected
|
| 64 |
|
| 65 | The `isSelected` prop is used to style the currently active page. It is
|
| 66 | important that it is only treated as active if the page is current as it also
|
| 67 | sets the `aria-current` attribute to `page`.
|
| 68 |
|
| 69 | ## Size
|
| 70 |
|
| 71 | `NavLink`s can be either `medium` or `large`.
|
| 72 |
|
| 73 | ```jsx live
|
| 74 | <Columns gap="small" collapseBelow="desktop">
|
| 75 | <Stack as="nav" gap="small">
|
| 76 | <NavLink href="#">Medium size nav item</NavLink>
|
| 77 | <NavLink href="#" size="large">
|
| 78 | Medium size nav item
|
| 79 | </NavLink>
|
| 80 | </Stack>
|
| 81 | <Stack as="nav" gap="small">
|
| 82 | <NavLink href="#">
|
| 83 | <HomeIcon />
|
| 84 | Large size nav item
|
| 85 | </NavLink>
|
| 86 | <NavLink href="#" size="large">
|
| 87 | <HomeIcon />
|
| 88 | Large size nav item
|
| 89 | </NavLink>
|
| 90 | </Stack>
|
| 91 | </Columns>
|
| 92 | ```
|
| 93 |
|
| 94 | ## Inline
|
| 95 |
|
| 96 | By default, the underlying element will be `display: flex` and will take up all
|
| 97 | available space. By setting the `inline` prop to `true` the `NavLink` will be
|
| 98 | `display: inline-flex` instead.
|
| 99 |
|
| 100 | ```jsx live
|
| 101 | <Stack gap="small">
|
| 102 | <Box>
|
| 103 | <NavLink href="#">NavLink without inline prop</NavLink>
|
| 104 | <NavLink href="#">NavLink without inline prop</NavLink>
|
| 105 | <NavLink href="#">NavLink without inline prop</NavLink>
|
| 106 | </Box>
|
| 107 | <Divider />
|
| 108 | <Box>
|
| 109 | <NavLink inline href="#">
|
| 110 | NavLink with inline prop
|
| 111 | </NavLink>
|
| 112 | <NavLink inline href="#">
|
| 113 | NavLink with inline prop
|
| 114 | </NavLink>
|
| 115 | <NavLink inline href="#">
|
| 116 | NavLink with inline prop
|
| 117 | </NavLink>
|
| 118 | </Box>
|
| 119 | </Stack>
|
| 120 | ```
|
| 121 |
|
| 122 | ## Props
|
| 123 |
|
| 124 | <PropsTable displayName="NavLink" />
|
| 125 |
|
| 126 | [data-attribute-map]:
|
| 127 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|