diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md
index 3a5d0d7286..6525109abd 100644
--- a/packages/web-react/src/components/Navigation/README.md
+++ b/packages/web-react/src/components/Navigation/README.md
@@ -18,7 +18,7 @@ import { Navigation } from '@lmc-eu/spirit-web-react';
{/* Navigation items go here */};
```
-It centers its children vertically and if the children are not `NavigationItem` components,
+It centres its children vertically, and if the children do not include `NavigationLink` components,
it will apply a gap between them.
ℹ️ Don't forget to add the `aria-label` attribute to the `Navigation` component for correct accessible state.
@@ -49,6 +49,10 @@ import { NavigationItem } from '@lmc-eu/spirit-web-react';
| ---------- | ----------------------- | ------- | -------- | ----------------------------- |
| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the NavigationItem |
+The components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
## Navigation Link
The `NavigationLink` is component that is styled to be used as a navigation link.
@@ -68,6 +72,8 @@ It can obtain `isSelected` or `isDisabled` states by adding the respective props
ℹ️ Don't forget to add the `aria-current="page"` attribute for correct accessible state if selected.
+ℹ️ Please note that in the `isDisabled` state the `NavigationLink` will be an `span` tag.
+
If the `NavigationLink` is inside a [`UNSTABLE_Header`][web-react-unstable-header] component, it will
inherit the height of the `Header`.
@@ -78,11 +84,15 @@ inherit the height of the `Header`.
| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the NavigationLink |
| `elementType` | `ElementType` | `a` | ✕ | Type of element used as |
| `href` | `string` | - | ✕ | URL of the link |
-| `isSelected` | `boolean` | `false` | ✕ | Whether the link is selected |
| `isDisabled` | `boolean` | `false` | ✕ | Whether the link is disabled |
+| `isSelected` | `boolean` | `false` | ✕ | Whether the link is selected |
| `ref` | `ForwardedRef` | — | ✕ | Anchor element reference |
| `target` | `string` | `null` | ✕ | Link target |
+The components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
### Full Example
With NavigationLink components:
@@ -90,7 +100,7 @@ With NavigationLink components:
```jsx
-
+
Selected Link
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx b/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx
index f0097c9c10..7ecc70c589 100644
--- a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx
+++ b/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx
@@ -10,7 +10,7 @@ const NavigationDefault = () => {
Link
-
+
Selected
diff --git a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
index 6d2b3ccffd..123f16c34a 100644
--- a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
+++ b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta = {
children: (
<>
-
+
Home
diff --git a/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts b/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts
index d3f13f1688..30a8ea89dd 100644
--- a/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts
+++ b/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts
@@ -7,13 +7,12 @@ export type UseNavigationLinkReturn = {
};
export const useNavigationLinkProps = (props: UseNavigationLinkProps): UseNavigationLinkReturn => {
- const { elementType = 'a', isDisabled, href, target, rel, ariaLabel } = props;
+ const { elementType = 'a', isDisabled, href, target, rel } = props;
const navigationLinkProps: Partial = {
href: elementType === 'a' && !isDisabled ? href : undefined,
target: elementType === 'a' && !isDisabled ? target : undefined,
rel: elementType === 'a' ? rel : undefined,
- 'aria-label': ariaLabel,
};
return {