Skip to main content

Menu navbar with depth

By default the MenuNavbar renders up to 3 layers of navigation levels items who could be styled trough overriding styles.

Required dependencies

Client​

  • @deity/falcon-ui-kit@v2.7.22

Server​

  • demo-v1 - @deity/falcon-magento2-api@v2.7.22
  • demo-v2 - @deity/falcon-bigcommerce-api@v2.7.22

Example simple MenuNavbar​

The most basic implementation renders the multi level menu on all devices.

client/src/components/Header/MenuNavbar.js

...
import React from 'react';
import { MenuQuery } from '@deity/falcon-shop-data';
import { MenuNavbar } from '@deity/falcon-ui-kit';
...
export const MenuNavBar = () => {
  return (
    <MenuQuery>
      {({ data: { menu } }) =>
        <MenuNavbar items={menu} />
      }
    </MenuQuery>
  );
};

Exemple of navbar with sidebar support for mobile (demo-v2)​

You have full control how to deal with the navigation menu on different devices. To only show the MenuNavbar on larger screens dispay atributes could be used as follow.

client/src/components/Header/MenuNavbar.js

import React from 'react';
import { MenuQuery } from '@deity/falcon-shop-data';
import { Button, Box, Text, Icon } from '@deity/falcon-ui';
import { MenuNavbar } from '@deity/falcon-ui-kit';
import { useSidebarContainer } from '@deity/falcon-front-kit';
import { T, useI18n } from '@deity/falcon-i18n';
import { SIDEBAR_TYPE } from 'src/components';
import { WideWrapper } from '../WideWrapper';

export const MenuNavBar = () => {
  const { t } = useI18n();
  const sidebar = useSidebarContainer();

  return (
    <WideWrapper>
      // Don't render navbar on small screen, but show toggle button that
      // triggers sidebar navigation
      <Button
        aria-label={t('navbar.openMobile')}
        aria-controls={`sidebar-${SIDEBAR_TYPE.menu}`}
        onClick={() => sidebar.open(SIDEBAR_TYPE.menu, undefined, 'left')}
      >
        <Icon src="menu"/>
        <Text><T id="navbar.openMobile" /></Text>
      </Button>
      
      // Only display MenuNavbar on medium screens
      <Box display={{ xs: 'none', md: 'block' }}>
        <MenuQuery>{({ data: { menu } }) => <MenuNavbar items={menu} />}</MenuQuery>
      </Box>
    </WideWrapper>
  );
};

Customize MenuNavbar styling​

Trough the theme object styling can be overridden a follow; client/src/styling/theme.js

export const falconTheme = createTheme({
  navbarItem: {
    css: {
      '> .themed-link': {
        // Add underline link in navbar
        textDecoration: 'underline',
      },
      '.themed-list-item > .themed-link': {
        // Remove underline of second child layer and change color
        textDecoration: 'none',
      }
    }
  },
  ...
})