ssw.megamenu v4.5.8
How to use the Mega Menu
Installation
- Install package
npm install ssw.megamenu
yarn add ssw.megamenu
pnpm add ssw.megamenu
- Import the generated styles
import "ssw.megamenu/dist/style.css";
NOTE: If you have TailwindCSS installed in your project, you can instead list the ssw.megamenu
package in your tailwind.config.js
content array and add the SSW colors like so:
// tailwind.config.js
// ...
module.exports = {
// ...
content: [
// ...
"node_modules/ssw.megamenu/**/*.js",
],
// ...
theme: {
extend: {
colors: {
ssw: {
red: "#cc4141",
light: {
red: "#d26e6e",
},
gray: "#797979",
black: "#333333",
},
},
}
}
};
- You can then use the components in your React app like so:
// CommonJS
const { Menu, MobileMenu, MenuBar } = require('ssw.megamenu');
// ESM
import { MegaMenuLayout } from 'ssw.megamenu';
Basic Usage
The ssw.megamenu
NPM package provides you with the <MegaMenuLayout />
component, which can be used in both client-side and server-side rendered React apps.
Example:
import { MegaMenuLayout } from 'ssw.megamenu';
function App() {
return (
<MegaMenuLayout />
/* {{ CONTENT_HERE }} */
);
}
Usage with SSR
The <MegaMenuLayout />
component can be used with SSG (Static Site Generation) and SSR (Server Side Rendering) frameworks like Next.js and Gatsby. This is achieved by providing an optional prop in the <MegaMenuLayout />
component called menuBarItems
, which is an array of objects that represent the menu bar items.
Example usage with SSR (Next.js):
import { MegaMenuLayout } from 'ssw.megamenu';
function App(props) {
return (
<MegaMenuLayout menuBarItems={props.menuBarItems} />
/* {{ CONTENT_HERE }} */
);
}
export function getStaticProps() {
const menuItems = await getMenuItems();
return {
props: {
menuItems,
},
};
}
Available Props
Prop Name | Type | Description | Required |
---|---|---|---|
menuBarItems | MenuBarItem[] | An array of objects that represent the menu bar items provided by SSR or other data fetching mechanisms. If this prop isn't supplied, the component will fetch the data from the Next.js API route. | No |
title | string | The title text displayed next to the SSW logo. | Yes (If there is no tagline provided) |
subtitle | string | The text displayed underneath the SSW logo | No |
tagline | string | The text displayed next the SSW Logo. | No |
url | string | The URL of the menu bar item. | No |
searchUrl | string | The absolute URL the search takes you to. If not provided, will default to the host address. i.e. for SSW <www.ssw.com.au> | No |
rightSideActionsOverride | () => JSX.Element | The component to replace the "Call Us" and search buttons that are displayed by default on the right side of the menu. | No |
linkComponent | React.FC<{ href: string; className?: string; title?: string; onClick?: () => void; children?: React.ReactNode;}> | The component to use for the links in the menu. i.e. <Link> from next/link or gatsby | No |
callback | (seachTerm: string) => void | Callback run on search. If provided, the search will not open a google tab. | No |
Testing
When using pnpm link
on the SSW.Website project, we encountered some issues with using ssw.megamenu
, so instead use file:
in the package.json
file to link the package like so:
{
"dependencies": {
"ssw.megamenu": "file:../SSW.MegaMenu"
}
}
Replace ../SSW.MegaMenu
with the path to the SSW.MegaMenu
project on your local machine.
How to contribute?
In the project directory, you can run:
pnpm dev
Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.
The page will reload if you make edits.
pnpm build
Builds the lib for production to the dist
folder.
How to publish?
- Important: Before to push your changes, you need to increment the version number in the file package.json using semver
- Make a pull request to add your code into the
main
branch. - Get the pull request approved
- Merge your code into the
main
branch - Publish a GitHub release with the same version number as the one you incremented in the file package.json at https://github.com/SSWConsulting/SSW.MegaMenu/releases
2 days ago
2 days ago
29 days ago
29 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
8 months ago
11 months ago
8 months ago
8 months ago
8 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago