[RFC] Component - MenuBar v1.0

[navin-moorthy]

Base Component to build an application Navbar, sidebar and Mobile Menu

The Goal:

Create a MenuBar as a navigation component that is composable, extensible and accessible using Chakra UI.

Key Resources:

• https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
• https://chakra-ui.com/menu
• https://ant.design/components/menu/

Key Features:

• Semantically well structured internally using ul, li and a by default.
• Vertical MenuBar.
• Popover & collapsable SubMenuList.
• Responsive.
• Adjustable popover width.
• Follows WAI-ARIA best practices for accessibility of a menubar.
• Inherits all the features of Chakra UI.

Import

• MenuBar: The wrapper component that provides context, state, and focus
  management.
• MenuBarItem: Items of the MenuBar which are the direct children of
  MenuBar
• SubMenu: The wrapper component that provides context, state, and focus
  management for SubMenu components.
• SubMenuTitle: The trigger for the SubMenuList. Must be a direct child of
  SubMenu.
• SubMenuList: The wrapper for the SubMenu items. Must be a direct child of
  SubMenu.
• SubMenuListArrow: A visual arrow that points to the reference (or trigger).
• SubMenuItem: The trigger that handles submenu selection. Must be a direct child of a SubMenuList.
• SubMenuGroup: A wrapper to group related submenu items.
• SubMenuDivider: A visual separator for submenu items and groups.
• SubMenuOptionGroup: A wrapper for checkable menu items (radio and checkbox)
• SubMenuItemOption: The checkable menu item, to be used with MenuOptionGroup

Usage

<MenuBar ariaLabel="Dishes">
  <MenuBarItem>Recipes</MenuBarItem>
  <MenuBarItem>My Calendar</MenuBarItem>
  <SubMenu>
    <SubMenuTitle>Meal Plans</SubMenuTitle>
    <SubMenuList>
      <SubMenuItem>Downloaded</SubMenuItem>
      <SubMenuItem>Create a Copyed</SubMenuItem>
      <SubMenuItem>Mark as Drafted</SubMenuItem>
      <SubMenuItem>Deleted</SubMenuItem>
    </SubMenuList>
  </SubMenu>
  <SubMenu>
    <SubMenuTitle>Groceries</SubMenuTitle>
    <SubMenuList>
      <SubMenuItem>Download</SubMenuItem>
      <SubMenuItem>Create a Copy</SubMenuItem>
      <SubMenuItem>Mark as Draft</SubMenuItem>
      <SubMenuItem>Delete</SubMenuItem>
      <SubMenuItem>Attend a Workshop</SubMenuItem>
    </SubMenuList>
  </SubMenu>
  <SubMenu>
    <SubMenuTitle>Workouts</SubMenuTitle>
    <SubMenuList>
      <SubMenuItem>Downloading</SubMenuItem>
      <SubMenuItem>Create a Coping</SubMenuItem>
      <SubMenuItem>Mark as Drafting</SubMenuItem>
      <SubMenuItem>Deleting</SubMenuItem>
      <SubMenuItem>Attending</SubMenuItem>
    </SubMenuList>
  </SubMenu>
  <MenuBarItem>Video</MenuBarItem>
  <MenuBarItem>Blog</MenuBarItem>
</MenuBar>

[navin-moorthy]

Can we have all the props as in https://ant.design/components/menu/ ?

[prasanna1211]

1. Items can be a dropdown, I think that is must. Dropdown shouldn't be a children. That is it shouldn't be something like

<NavItem>
  <Dropdown />
</NavItem>

Instead it should be

  <NavItem type="dropdown>
    render all <NavItemOptions />
  </NavItem>

Reason is that, if it is a children the composition would change for dropdown in smaller screens. You might have to use ul li to manage the list.

Whereas in the second option when type="dropdown" is passed in as a context, the NavItemOptions should automatically get converted to a collapsible list. Agree ?

[govindsingh55]

Chakra MenuList is always being rendered in Popover so

• we can`t directly use the chakra menu (if we want MenuList to be collapse-expandable)
• to get the collapse-expandable behavior MenuList(chakra internal code) modification is required.

[prasanna1211]

Our menu is different from their menu. Ours is a kind of nav component that creates a list of navitems. Our nav item can be a Chakra Menu (or) a simple navigatable ul li's. For now we can use their chakra menu to be our nav item in case if our submenu is of type dropdown.

[govindsingh55]

in case if our submenu is of type dropdown.

modification is required. have to put a condition whether the return will be popover MenuList or Collapsable MenuList

[prasanna1211]

Collapsible is not a case for desktop screen. Lets make a desktop version where there can be just two types.

1. type = 'dropdown' - which can open sub nav items that can be a simple nav item.
2. type = 'nav' - which is a direct nav item.

By nav item I mean once clicked can navigate you through a route. It will have onActionProp.

[govindsingh55]

NavItem is just a container that can receive children like Link, string, button, icon, menu or any other composition.
so type is not required I think for NavItem

[prasanna1211]

ok, for desktop it is not needed. But for mobile it will be needed. Ignore for it now.

[sandeepprabhakaran]

Desktop version can also have a collapsible menu type. We should think about the use case like this:

<Nav>
<NavItem>
<SubNavItem>Any children components can be rendered here</SubNavItem>
</NavItem>
<NavItem>
</NavItem>
</Nav>

[prasanna1211]

@sandeepprabhakaran In that case we would be having to write two different children, one for responsive and another for desktop ?

[sandeepprabhakaran]

Can you explain why that's required? Pretty much every Navitem will be collapsed on responsive, only that there can be two levels.
Collapsed nav ... <NavItem> ... <SubNavItem>

So in that sense we know which Menus will go one level deep or two level deep. Right?

[prasanna1211]

I will explain the case clearly.

The ideal way that we are looking is to have a desktop version something like this

The Code would look like

<Nav>
  <NavItem type="link" action={navigateTo}>Navigation one</SubNavItem>
  <NavItem type="link" action={navigateTo} disabled>Navigation two</SubNavItem>
  <NavItem type="submenu">
    <SubNavItem type="link" action={navigateTo}>Option 1</SubNavItem>
    <SubNavItem type="link" action={navigateTo}>Option 2</SubNavItem>
  </NavItem>
</Nav>

To achieve the same thing with chakra Menu as a NavItem, the code would be looking like

<Nav>
  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo}>Navigation one</SubNavItem>
  
  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo} disabled>Navigation two</SubNavItem>

  // Use Chakra menu that uses Popover JS
  <NavItem type="submenu">
    <SubNavItem type="link" action={navigateTo}>Option 1</SubNavItem>
    <SubNavItem type="link" action={navigateTo}>Option 2</SubNavItem>
  </NavItem>
</Nav>

On Desktop screen [Works fine]

On Mobile screen (Issue: Cannot collapse since it is always a dropdown using popover)

So to avoid this issue either

NavItem should be rendering Chakra's menu at desktop screen and a simple collapsible list at mobile screen.

(or)

Compose with two different components when using it in the app.

[navin-moorthy]

<Nav>
  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo}>Navigation one</SubNavItem>
  
  // Don't use chakra menu for the next line since it is just a normal link
  <NavItem type="link" action={navigateTo} disabled>Navigation two</SubNavItem>

  // Use Chakra menu that uses Popover JS
  <NavItem type="submenu">
    <SubNavItem type="link" action={navigateTo}>Option 1</SubNavItem>
    <SubNavItem type="link" action={navigateTo}>Option 2</SubNavItem>
  </NavItem>
</Nav>

Just like this

We can have our Link component with NavItem since it will be a Box Components right?
Do we need type props?

I think it's best to compose our own submenu component to tackle the responsiveness.

[navin-moorthy]

Note- Updated the Description

Pending Features

• Handle body scroll locking when content overflows
• Mobile Menu