How to Create Sub Menu

Hi all,

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

Many thanks.

1 Like

Hi @dejangeorgiev,

Here you have a demo with a SubMenu →
And here you have the repo with the code →

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


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ú


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

const Menu = ({options, currentPageLink, submenu}) => (
  <StyledMenu submenu={submenu}>
    {{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 */}
            aria-current={isCurrentPage ? "page" : undefined}
          { submenu && <Menu options={submenu} currentPageLink={currentPageLink} submenu/> }

const Navigation = ({ state }) => (
      <Menu options={} currentPageLink={} />

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

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)

Btw, i am trying to build a food & travel blog for my wife.

Thank you.

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 you have to be aware of the components that are using


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

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,