const Container = styled(Box)`
  display: flex;
  width: 400px;
  height: 450px;
  border: 1px solid ${theme.colors.light};
`;

const MainPage = styled.main`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
`;

const itemGroups = [
  [
    {
      expanded: true,
      icon: Doc,
      label: 'Subscription',
      tag: 'new',
      subitems: [{ label: 'Details' }],
    },
    {
      active: true,
      icon: Doc,
      label: 'Billing',
    },
  ],
  [
    {
      icon: Help,
      label: 'Help',
    },
  ],
];

// Whether the link handles the active attribute automatically (e.g., link from react-router-dom)
// then the item's active prop is not needed
const renderWrapper = ({ children }) => (
  <a href="https://www.gympass.com">{children}</a>
);

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

render(() => {
  return (
    <Container>
      <NavigationMenu responsive={false}>
        <NavigationMenu.Header>
          <NavigationMenu.Menu
            avatar={<Avatar.Circle />}
            title="Company"
            subtitle="Reseller"
          />
        </NavigationMenu.Header>

        <NavigationMenu.Items>
          {itemGroups.map((group, index) => (
            <NavigationMenu.ItemsGroup key={index}>
              {group.map(item => (
                <NavigationMenu.Item
                  key={item.label}
                  active={item.active}
                  expanded={item.expanded}
                  icon={<IconComponent icon={item.icon} />}
                  label={item.label}
                  responsive={false}
                  wrapper={renderWrapper}
                  tag={item.tag}
                >
                  {item.subitems &&
                    item.subitems.map(({ label }) => (
                      <NavigationMenu.Subitem
                        key={label}
                        label={label}
                        wrapper={renderWrapper}
                      />
                    ))}
                </NavigationMenu.Item>
              ))}
            </NavigationMenu.ItemsGroup>
          ))}
        </NavigationMenu.Items>

        <NavigationMenu.Footer>
          <NavigationMenu.Switcher
            avatar={<Avatar.Circle />}
            title="User"
            subtitle="Admin, Supervisor"
          />
        </NavigationMenu.Footer>
      </NavigationMenu>

      <MainPage>Main page</MainPage>
    </Container>
  );
});const Container = styled(Box)`
  display: flex;
  width: 400px;
  height: 450px;
  border: 1px solid ${theme.colors.light};
`;

const MainPage = styled.main`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
`;

const itemGroups = [
  [
    {
      expanded: true,
      icon: Doc,
      label: 'Subscription',
      tag: 'new',
      subitems: [{ label: 'Details' }],
    },
    {
      active: true,
      icon: Doc,
      label: 'Billing',
    },
  ],
  [
    {
      icon: Help,
      label: 'Help',
    },
  ],
];

// Whether the link handles the active attribute automatically (e.g., link from react-router-dom)
// then the item's active prop is not needed
const renderWrapper = ({ children }) => (
  <a href="https://www.gympass.com">{children}</a>
);

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

render(() => {
  return (
    <Container>
      <NavigationMenu responsive={false}>
        <NavigationMenu.Header>
          <NavigationMenu.Menu
            avatar={<Avatar.Circle />}
            title="Company"
            subtitle="Reseller"
          />
        </NavigationMenu.Header>

        <NavigationMenu.Items>
          {itemGroups.map((group, index) => (
            <NavigationMenu.ItemsGroup key={index}>
              {group.map(item => (
                <NavigationMenu.Item
                  key={item.label}
                  active={item.active}
                  expanded={item.expanded}
                  icon={<IconComponent icon={item.icon} />}
                  label={item.label}
                  responsive={false}
                  wrapper={renderWrapper}
                  tag={item.tag}
                >
                  {item.subitems &&
                    item.subitems.map(({ label }) => (
                      <NavigationMenu.Subitem
                        key={label}
                        label={label}
                        wrapper={renderWrapper}
                      />
                    ))}
                </NavigationMenu.Item>
              ))}
            </NavigationMenu.ItemsGroup>
          ))}
        </NavigationMenu.Items>

        <NavigationMenu.Footer>
          <NavigationMenu.Switcher
            avatar={<Avatar.Circle />}
            title="User"
            subtitle="Admin, Supervisor"
          />
        </NavigationMenu.Footer>
      </NavigationMenu>

      <MainPage>Main page</MainPage>
    </Container>
  );
});

import { Doc, Help, MenuMore } from '@gympass/yoga-icons';
import { media } from '@gympass/yoga-helpers';
import { theme, Icon, Container, NavigationMenu, Avatar, Box } from '@gympass/yoga';
import { flex } from '@gympass/yoga-system';

const Container = styled(Box)`
  display: flex;
  width: 400px;
  height: 450px;
  border: 1px solid ${theme.colors.light};

  ${media.max('lg')`flex-direction: column;`}
`;

const MainPage = styled.main`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
`;

const itemMainGroup = [
  {
    expanded: true,
    icon: Doc,
    label: 'Subscription',
    tag: 'new',
    subitems: [{ label: 'Details' }],
  },
  {
    active: true,
    icon: Doc,
    label: 'Billing',
  },
];

const itemGroups = [
  [...itemMainGroup],
  [
    {
      icon: Help,
      label: 'Help',
    },
  ],
];

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

render(() => {
  const [isOpenOnMobile, setIsOpenOnMobile] = useState(false);

  // Whether the link handles the active attribute automatically (e.g., link from react-router-dom)
  // then the item's active prop is not needed
  const renderWrapper = ({ children }) => (
    <a href="https://www.gympass.com" onClick={() => setIsOpenOnMobile(false)}>
      {children}
    </a>
  );

  const bottomItems = [
    ...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({
      active,
      icon,
      label,
      wrapper: renderWrapper,
    })),
    {
      // Missing the active logic here.
      // It must be active when none of the other left items are active.
      icon: MenuMore,
      label: 'More',
      wrapper: ({ children }) => (
        <div onClick={() => setIsOpenOnMobile(!isOpenOnMobile)}>{children}</div>
      ),
    },
  ];

  return (
    <Container>
      {/* It is not possible to demonstrate all the responsive behavior here. */}
      {/* When clicking on the "More" item, the entire menu will be displayed above the bottom bar. */}
      {/* To get the entire flow the openOnMobile={false} prop must be replaced by openOnMobile={isOpenOnMobile} */}
      <NavigationMenu openOnMobile={false}>
        <NavigationMenu.Header>
          <NavigationMenu.Menu
            avatar={<Avatar.Circle />}
            title="Company"
            subtitle="Reseller"
          />
        </NavigationMenu.Header>

        <NavigationMenu.Items>
          {itemGroups.map((group, index) => (
            <NavigationMenu.ItemsGroup key={index}>
              {group.map(item => (
                <NavigationMenu.Item
                  key={item.label}
                  active={item.active}
                  expanded={item.expanded}
                  icon={<IconComponent icon={item.icon} />}
                  label={item.label}
                  wrapper={renderWrapper}
                  tag={item.tag}
                >
                  {item.subitems &&
                    item.subitems.map(({ label }) => (
                      <NavigationMenu.Subitem
                        key={label}
                        label={label}
                        wrapper={renderWrapper}
                      />
                    ))}
                </NavigationMenu.Item>
              ))}
            </NavigationMenu.ItemsGroup>
          ))}
        </NavigationMenu.Items>

        <NavigationMenu.Footer>
          <NavigationMenu.Switcher
            avatar={<Avatar.Circle />}
            title="User"
            subtitle="Admin, Supervisor"
          />
        </NavigationMenu.Footer>
      </NavigationMenu>

      <MainPage>Main page</MainPage>

      <NavigationMenu.BottomItems>
        {bottomItems.map(({ active, icon, label, wrapper }) => (
          <NavigationMenu.BottomItem
            key={label}
            active={active}
            icon={icon}
            label={label}
            wrapper={wrapper}
          />
        ))}
      </NavigationMenu.BottomItems>
    </Container>
  );
});const Container = styled(Box)`
  display: flex;
  width: 400px;
  height: 450px;
  border: 1px solid ${theme.colors.light};

  ${media.max('lg')`flex-direction: column;`}
`;

const MainPage = styled.main`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
`;

const itemMainGroup = [
  {
    expanded: true,
    icon: Doc,
    label: 'Subscription',
    tag: 'new',
    subitems: [{ label: 'Details' }],
  },
  {
    active: true,
    icon: Doc,
    label: 'Billing',
  },
];

const itemGroups = [
  [...itemMainGroup],
  [
    {
      icon: Help,
      label: 'Help',
    },
  ],
];

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

render(() => {
  const [isOpenOnMobile, setIsOpenOnMobile] = useState(false);

  // Whether the link handles the active attribute automatically (e.g., link from react-router-dom)
  // then the item's active prop is not needed
  const renderWrapper = ({ children }) => (
    <a href="https://www.gympass.com" onClick={() => setIsOpenOnMobile(false)}>
      {children}
    </a>
  );

  const bottomItems = [
    ...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({
      active,
      icon,
      label,
      wrapper: renderWrapper,
    })),
    {
      // Missing the active logic here.
      // It must be active when none of the other left items are active.
      icon: MenuMore,
      label: 'More',
      wrapper: ({ children }) => (
        <div onClick={() => setIsOpenOnMobile(!isOpenOnMobile)}>{children}</div>
      ),
    },
  ];

  return (
    <Container>
      {/* It is not possible to demonstrate all the responsive behavior here. */}
      {/* When clicking on the "More" item, the entire menu will be displayed above the bottom bar. */}
      {/* To get the entire flow the openOnMobile={false} prop must be replaced by openOnMobile={isOpenOnMobile} */}
      <NavigationMenu openOnMobile={false}>
        <NavigationMenu.Header>
          <NavigationMenu.Menu
            avatar={<Avatar.Circle />}
            title="Company"
            subtitle="Reseller"
          />
        </NavigationMenu.Header>

        <NavigationMenu.Items>
          {itemGroups.map((group, index) => (
            <NavigationMenu.ItemsGroup key={index}>
              {group.map(item => (
                <NavigationMenu.Item
                  key={item.label}
                  active={item.active}
                  expanded={item.expanded}
                  icon={<IconComponent icon={item.icon} />}
                  label={item.label}
                  wrapper={renderWrapper}
                  tag={item.tag}
                >
                  {item.subitems &&
                    item.subitems.map(({ label }) => (
                      <NavigationMenu.Subitem
                        key={label}
                        label={label}
                        wrapper={renderWrapper}
                      />
                    ))}
                </NavigationMenu.Item>
              ))}
            </NavigationMenu.ItemsGroup>
          ))}
        </NavigationMenu.Items>

        <NavigationMenu.Footer>
          <NavigationMenu.Switcher
            avatar={<Avatar.Circle />}
            title="User"
            subtitle="Admin, Supervisor"
          />
        </NavigationMenu.Footer>
      </NavigationMenu>

      <MainPage>Main page</MainPage>

      <NavigationMenu.BottomItems>
        {bottomItems.map(({ active, icon, label, wrapper }) => (
          <NavigationMenu.BottomItem
            key={label}
            active={active}
            icon={icon}
            label={label}
            wrapper={wrapper}
          />
        ))}
      </NavigationMenu.BottomItems>
    </Container>
  );
});

import { theme, NavigationMenu, Text, Avatar } from '@gympass/yoga';

const StyledAvatar = styled(Avatar.Circle)`
  background-color: ${theme.colors.vibin};
`;

render(() => {
  return (
    <NavigationMenu responsive={false}>
      <NavigationMenu.Header>
        <NavigationMenu.Menu
          avatar={
            <StyledAvatar>
              <Text color="white">C</Text>
            </StyledAvatar>
          }
          title="Company"
          subtitle="Reseller"
          onClick={() => alert('Menu was clicked')}
        />
      </NavigationMenu.Header>
    </NavigationMenu>
  );
});const StyledAvatar = styled(Avatar.Circle)`
  background-color: ${theme.colors.vibin};
`;

render(() => {
  return (
    <NavigationMenu responsive={false}>
      <NavigationMenu.Header>
        <NavigationMenu.Menu
          avatar={
            <StyledAvatar>
              <Text color="white">C</Text>
            </StyledAvatar>
          }
          title="Company"
          subtitle="Reseller"
          onClick={() => alert('Menu was clicked')}
        />
      </NavigationMenu.Header>
    </NavigationMenu>
  );
});

Switcher subcomponent with actions

import { theme, NavigationMenu, Avatar } from '@gympass/yoga';

const StyledAvatar = styled(Avatar.Circle)`
  background-color: ${theme.colors.white};
  border: 1px solid ${theme.colors.light};
`;

const actions = [
  {
    id: 'Action 1',
    label: 'Action 1',
    onClick: () => alert('Action 1 was selected'),
  },
  {
    id: 'Action 2',
    label: 'Action 2',
    onClick: () => alert('Action 2 was selected'),
  },
];

render(() => {
  return (
    <NavigationMenu responsive={false}>
      <NavigationMenu.Footer>
        <NavigationMenu.Switcher
          actions={actions}
          avatar={<StyledAvatar fill="vibin" />}
          sideOffset={36}
          subtitle="Admin, Supervisor"
          title="User"
        />
      </NavigationMenu.Footer>
    </NavigationMenu>
  );
});const StyledAvatar = styled(Avatar.Circle)`
  background-color: ${theme.colors.white};
  border: 1px solid ${theme.colors.light};
`;

const actions = [
  {
    id: 'Action 1',
    label: 'Action 1',
    onClick: () => alert('Action 1 was selected'),
  },
  {
    id: 'Action 2',
    label: 'Action 2',
    onClick: () => alert('Action 2 was selected'),
  },
];

render(() => {
  return (
    <NavigationMenu responsive={false}>
      <NavigationMenu.Footer>
        <NavigationMenu.Switcher
          actions={actions}
          avatar={<StyledAvatar fill="vibin" />}
          sideOffset={36}
          subtitle="Admin, Supervisor"
          title="User"
        />
      </NavigationMenu.Footer>
    </NavigationMenu>
  );
});

Props

Prop	Description	Type	Default	Required
children	Menu sub components	node		true
openOnMobile	Indicates whether the menu is open/close in mobile	bool	`false`	false
responsive	Indicates whether the menu should be responsive	bool	`true`	false
zIndex	Value of z-index of the menu	number	`2`	false

NavigationMenu.Menu

Prop	Description	Type	Required
avatar	Element displayed on the left (Avatar, Icon, ...)	node	true
subtitle	Text to be displayed as subtitle	string	false
title	Text to be displayed as title	string	false
onClick	Event triggered when clicking on the component	func	false
icon	Custom action icon	node	false

NavigationMenu.Switcher action

Prop	Description	Type	Default	Required
id	Action id	string		true
label	Action label	string		true
onClick	Event triggered when clicking on the action	func		true
zIndex	Value of z-index of the switcher actions menu	number	`1`	false

NavigationMenu.Switcher

Prop	Description	Type	Default	Required
actions	Switcher actions	obj		false
avatar	Element displayed on the left (Avatar, Icon, ...)	node		true
fill	Color used as background	string	`transparent`	false
isLoading	Indicates whether the title and the subtitle are loading	bool	`false`	false
sideOffset	Horizontal space between the action icon and the list	string	`4`	false
subtitle	Text to be displayed as subtitle	string		false
title	Text to be displayed as title	string		false

NavigationMenu.Item

Prop	Description	Type	Default	Required
active	Indicates whether the item is active/inactive. This prop is not necessary when the wrapper already handles this.	bool	`false`	false
children	Subitems to be displayed under the item	node		false
expanded	Controls when to hide/show subitems	bool	`false`	false
icon	Item's icon	node		false
label	Item's name	string		true
responsive	Indicates whether the item should be responsive	bool	`true`	false
tag	Tag text	string		false
wrapper	Link that wraps the item	node		true

NavigationMenu.Subitem

Prop	Description	Type	Default	Required
active	Indicates whether the item is active/inactive. This prop is not necessary when the wrapper already handles this.	bool	`false`	false
label	Item's name	string		true
wrapper	Link that wraps the subitem	node		true

NavigationMenu.BottomItems

Prop	Description	Type	Default	Required
children	Items to be displayed in the mobile bottom bar	node		true
zIndex	Value of z-index of the bottom items menu	number	`2`	false

NavigationMenu.BottomItem

Prop	Description	Type	Default	Required
active	Indicates whether the item is active/inactive. This prop is not necessary when the wrapper already handles this.	bool	`false`	false
icon	Item's icon	node		false
label	Item's name	string		true
wrapper	Link that wraps the item	node		true

NavigationMenu

Reference

Usage

Not responsive navigation menu

Responsive navigation menu

Menu subcomponent with an action

Switcher subcomponent with actions

Props

NavigationMenu

NavigationMenu.Menu

NavigationMenu.Switcher action

NavigationMenu.Switcher

NavigationMenu.Item

NavigationMenu.Subitem

NavigationMenu.BottomItems

NavigationMenu.BottomItem