Content Menu

v.6.0.0

Installation

yarn

yarn add @mercell/content-menu-react

pnpm

pnpm add @mercell/content-menu-react

npm

npm install --save @mercell/content-menu-react

The ContentMenu has necessary peerDependencies, please make sure that you have them in your project

"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Content Menu component is as simple as importing it like this.

import ContentMenu from '@mercell/content-menu-react';

Live Editor

const contentNavigation = [ { title: 'Overview', path: 'overview' }, { title: 'Q&A', path: 'qna' }, { title: 'Offers', path: 'offers' }, { title: 'Messages', path: 'messages' }, ]; const secondaryContentNavigation = [ { title: 'Shortcut 1', path: 'short1' }, { title: 'Shortcut 2', path: 'short2' }, ]; const ContentMenuTrackedByTitle = () => { const [selected, setSelected] = React.useState(contentNavigation[0].title); return ( <ContentMenu className="mb-10" selectedItem={selected} primaryItems={contentNavigation} onClick={(e, title: string, path: string) => { e.preventDefault(); // use only to block automatic navigation by path // under the hood we are using NavLink to navigate to the path setSelected(title); }} /> ); }; const ContentMenuTrackedByPath = () => { const [selected, setSelected] = React.useState(contentNavigation[0].path); return ( <ContentMenu className="mb-10" selectedItem={selected} selectedItemType="path" primaryItems={contentNavigation} onClick={(e, title: string, path: string) => { e.preventDefault(); // use only to block automatic navigation by path // under the hood we are using NavLink to navigate to the path setSelected(path); }} /> ); }; const ContentMenuWithDivider = () => { const [selected, setSelected] = React.useState(contentNavigation[0].title); return ( <ContentMenu selectedItem={selected} primaryItems={contentNavigation} secondaryItems={secondaryContentNavigation} onClick={(e, title: string, path: string) => { e.preventDefault(); // use only to block automatic navigation by path // under the hood we are using NavLink to navigate to the path setSelected(title) }} /> ); }; render ( <div className="flex flex-col items-center justify-between mt-32 space-y-14"> <ContentMenuTrackedByTitle /> <ContentMenuTrackedByPath /> <ContentMenuWithDivider /> </div> )

const contentNavigation = [
    { title: 'Overview', path: 'overview' },
    { title: 'Q&A', path: 'qna' },
    { title: 'Offers', path: 'offers' },
    { title: 'Messages', path: 'messages' },
];
const secondaryContentNavigation = [
    { title: 'Shortcut 1', path: 'short1' },
    { title: 'Shortcut 2', path: 'short2' },
];
const ContentMenuTrackedByTitle = () => {
    const [selected, setSelected] = React.useState(contentNavigation[0].title);
    return (
        <ContentMenu
            className="mb-10"
            selectedItem={selected}
            primaryItems={contentNavigation}
            onClick={(e, title: string, path: string) => {
                e.preventDefault();
                // use only to block automatic navigation by path
                // under the hood we are using NavLink to navigate to the path
                setSelected(title);
            }}
        />
    );
};
const ContentMenuTrackedByPath = () => {
    const [selected, setSelected] = React.useState(contentNavigation[0].path);
    return (
        <ContentMenu
            className="mb-10"
            selectedItem={selected}
            selectedItemType="path"
            primaryItems={contentNavigation}
            onClick={(e, title: string, path: string) => {
                e.preventDefault();
                // use only to block automatic navigation by path
                // under the hood we are using NavLink to navigate to the path
                setSelected(path);
            }}
        />
    );
};
const ContentMenuWithDivider = () => {
    const [selected, setSelected] = React.useState(contentNavigation[0].title);
    return (
        <ContentMenu
            selectedItem={selected}
            primaryItems={contentNavigation}
            secondaryItems={secondaryContentNavigation}
            onClick={(e, title: string, path: string) => {
                e.preventDefault();
                // use only to block automatic navigation by path
                // under the hood we are using NavLink to navigate to the path
                setSelected(title)
            }}
        />
    );
};
render (
    <div className="flex flex-col items-center justify-between mt-32 space-y-14">
        <ContentMenuTrackedByTitle />
        <ContentMenuTrackedByPath />
        <ContentMenuWithDivider />
    </div>
)

Result

Types, definitions, etc.

Types

ContentMenuProps

type ContentMenuProps = {
    selectedItem: string;
    selectedItemType?: 'path' | 'title';
    primaryItems: ContentMenuItem[];
    secondaryItems?: ContentMenuItem[];
    onClick: (
        e: MouseEvent<HTMLAnchorElement>,
        title: string,
        path: string
    ) => void;
} & Omit<JSX.IntrinsicElements['div'], 'onClick'>

Name	Type	Default	Required	Description
selectedItem	string	-	yes	the title of the selected item (highlighted in the menu)
selectedItemType	'path' | 'title'	'title'	no	type based on which we know which item is selected
primaryItems	ContentMenuItem[]	-	yes	an array of ContentMenuItem
secondaryItems	ContentMenuItem[]	-	no	an additional array of ContentMenuItem (optional)
onClick	( e:MouseEvent<HTMLAnchorElement>, title: string, path: string) => void	-	yes	use if you want to do any additional action other than navigate

ContentMenuItem

type ContentMenuItem = {
    title: string;
    path: string;
    ariaLabel?: string;
    disabled?: boolean;
};

Name	Type	Default	Required	Description
title	string	-	yes	specifies the link's title
path	string	-	yes	specifies the link's URL
ariaLabel	string	-	no	Aria-Label for menu item
disabled	boolean	-	no	Disable menu item

Changelog

Change Log - @mercell/content-menu-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

6.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

5.1.0

Fri, 16 Sep 2022 08:14:10 GMT

Minor changes

• Migration to react router 6

5.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

4.0.6

Thu, 14 Jul 2022 13:28:46 GMT

Patches

• Updated hover state to remove sticky hover on mobile

4.0.5

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

4.0.4

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

4.0.3

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

4.0.2

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Adding the same peerDependencies to devDependencies

4.0.1

Thu, 13 Jan 2022 16:05:40 GMT

Patches

• Change tag from anchor to NavLink component to meet WCAG needs, add properties to track path or title

4.0.0

Wed, 12 Jan 2022 13:56:48 GMT

Breaking changes

• new design, breaking changes

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.0.5

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.0.4

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.0.3

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Revert tailwind version

2.0.2

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.0.1

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Gitignore fix

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

• New local build process with webpack without storybook, add npmignore and update dependencies

1.0.9

Thu, 02 Sep 2021 08:03:42 GMT

Patches

• Adjust component to strict mode in typescript

1.0.8

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

1.0.7

Tue, 25 May 2021 07:21:25 GMT

Patches

• Wrap mobile view button in a div with a backgrouond color

1.0.6

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

1.0.5

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

1.0.4

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

1.0.3

Wed, 24 Feb 2021 11:34:29 GMT

Patches

• Default backgroun now base instead of nothing

1.0.2

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.1

Thu, 18 Feb 2021 10:26:12 GMT

Patches

• Export

1.0.0

Fri, 05 Feb 2021 13:40:11 GMT

Breaking changes

• Added component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in a new tab