summaryrefslogtreecommitdiffstats
path: root/src/components/molecules/nav
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/nav')
-rw-r--r--src/components/molecules/nav/nav.stories.tsx26
-rw-r--r--src/components/molecules/nav/nav.tsx7
2 files changed, 32 insertions, 1 deletions
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index 25455fd..5cef5f0 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -11,6 +11,19 @@ export default {
title: 'Molecules/Navigation/Nav',
component: NavComponent,
argTypes: {
+ 'aria-label': {
+ control: {
+ type: 'text',
+ },
+ description: 'An accessible name for the navigation.',
+ table: {
+ category: 'Accessibility',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
className: {
control: {
type: 'text',
@@ -46,6 +59,19 @@ export default {
required: true,
},
},
+ listClassName: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set additional classnames to the navigation list.',
+ table: {
+ category: 'Styles',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
},
decorators: [
(Story) => (
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
index 2666ea2..581f813 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav.tsx
@@ -24,6 +24,10 @@ export type NavItem = {
export type NavProps = {
/**
+ * An accessible name.
+ */
+ 'aria-label'?: string;
+ /**
* Set additional classnames to the navigation wrapper.
*/
className?: string;
@@ -51,6 +55,7 @@ const Nav: FC<NavProps> = ({
items,
kind,
listClassName = '',
+ ...props
}) => {
const kindClass = `nav--${kind}`;
@@ -71,7 +76,7 @@ const Nav: FC<NavProps> = ({
};
return (
- <nav className={`${styles[kindClass]} ${className}`}>
+ <nav className={`${styles[kindClass]} ${className}`} {...props}>
<ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul>
</nav>
);