How to Create Sub Menu

🙋Get Help
1

Hi all,

I am wondering what would be the best approach for creating sub menus on the navigation?
Any suggestions?

Many thanks.
Best,
Dejan

1 Like
3

Hi @dejangeorgiev,

Here you have a demo with a SubMenu → https://demo-submenus.juanmaguitar.now.sh/
And here you have the repo with the code → https://github.com/frontity-demos/demo-submenus

You can store any structure for your menú in any file, or directly in the state so it can be available (by using connect) for any component

frontity.settings.js

const settings = {
  "name": "demo-submenus",
  "state": { ... },
  "packages": [
    {
      "name": "@frontity/twentytwenty-theme",
      "state": {
        "theme": {
          "menu": [
            {
              name: 'Home',
              href: '/',
            },
            {
              name: 'Nature',
              href: '/category/nature/',
            },
            {
              name: 'Photgraphy',
              href: '/category/photography/',
            },
            {
              name: 'Travel',
              href: '/category/travel/',
              submenu: [
                {
                  name: 'Vietnam',
                  href: '/tag/vietnam/'
                },
                {
                  name: 'Japan',
                  href: '/tag/japan/'
                },
                {
                  name: 'Iceland',
                  href: '/tag/iceland/'
                }
              ]
            }
          ],
          ...
        }
      }
    },
     ...
  ]
};

export default settings;

Then you can use this structure from any of your React Components to build your custom menú

packages/twentytwenty-theme/src/components/navigation/navigation.js

import React from "react";
import { connect, styled } from "frontity";
import Link from "../link";

const Menu = ({options, currentPageLink, submenu}) => (
  <StyledMenu submenu={submenu}>
    {options.map(({name, href, submenu}) => {
      // Check if the link matched the current page url
      const isCurrentPage = currentPageLink === href;
      return (
        <MenuItem key={name}>
          {/* If link url is the current page, add `aria-current` for a11y */}
          <MenuLink
            link={href}
            aria-current={isCurrentPage ? "page" : undefined}
          >
            {name}
          </MenuLink>
          { submenu && <Menu options={submenu} currentPageLink={currentPageLink} submenu/> }
        </MenuItem>
      );
    })}
  </StyledMenu>
)

const Navigation = ({ state }) => (
  <NavWrapper>
    <MenuNav>
      <Menu options={state.theme.menu} currentPageLink={state.router.link} />
    </MenuNav>
  </NavWrapper>
);

export default connect(Navigation);

const NavWrapper = ...
const MenuNav = ...
const MenuItem = ...
const MenuLink = ...

const StyledMenu = styled.ul`
  display: flex;
  flex-direction: ${({submenu}) => submenu && 'column'};
  visibility: ${({submenu}) => submenu && 'hidden'};
  position: ${({submenu}) => submenu && 'absolute'};
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.0277em;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  margin: ${({submenu}) => submenu ? '10px' : 0};
  width: ${({submenu}) => submenu && '100px'};

  ${MenuItem}:hover & {
    visibility: ${({submenu}) => submenu && 'visible'};
  }

  @media (min-width: 1220px) {
    margin-top: ${({submenu}) => submenu ? '10px' : '-0.8rem'}; ;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -2.5rem;
  }
`;

Hope this helps

What do you plan to build with Frontity?

1 Like
4

Hi @juanma,

Thank you so much for the detailed explanation.
However i tried the same but without success. (see Screenshot from my code and from the error i get)

2020-05-07_21h55_02
2020-05-07_21h55_021920×1050 229 KB

2020-05-07_23h33_52
2020-05-07_23h33_521253×776 51 KB

Btw, i am trying to build a food & travel blog for my wife. https://ruthgeorgiev-frontity.now.sh/recipes/

Thank you.
Best,
Dejan

5

Hi @dejangeorgiev,

It would be easier for the community (and Frontity team) to help you with your project if you share a repo with your code (so anyone can clone it and debug it locally).

Anyway, the error seems to be in the packages/twentytwenty-theme/src/components/mobile/menu-modal.js

As you’re modifying this theme, if you change the structure of state.theme.menu you have to be aware of the components that are using state.theme.menu

...

const MobileMenuModal = ({ state, actions }) => {

  const { menu, ... } = state.theme;
  ...
};
...
export default connect(MobileMenuModal);

So, options here to avoid this error:

Great! :woman_cook:
Once you have it, you can share the project in the Showcases section so the community can discover what can be done with Frontity

1 Like
6

hi @juanma

Thank you very much for your help!
I fixed the MobileMenuModal and it works fine.

Sure, once i have it live i will share it in the Showcases. :slight_smile:

Thank you so much.

All the best,
Dejan

3 Likes