Menu item grouping and alignment

• I have searched the issues of this repository and believe that this is not a duplicate.

Someone else has requested something similar [1] but the response to that request was hijacked by text alignment (which is not what this is about) and then sadly closed for inactivity…

[1] https://github.com/ant-design/ant-design/issues/6111

What problem does this feature solve?

The ability to group menu items in a Menu with mode=horizontal so that these item groups can be aligned left (default) or right. It’s common for applications to have an Account or Logout option in the top right corner of a main navigation where access to application features might live on the left in the top navigation. There is currently no mechanism to a) divide the top level nav into multiple item groups and b) align these item groups either left or right.

What does the proposed API look like?

Using the Top Side 2 demo as an example (https://github.com/ant-design/ant-design/blob/master/components/layout/demo/top-side-2.md).

The Menu in the Header would have the ability to group the menu items and then align each group accordingly:

<Header className="header">
  <div className="logo" />
  <Menu
    theme="dark"
    mode="horizontal"
    defaultSelectedKeys={['11']}
    style={{ lineHeight: '64px' }}
  >
    <Menu.Group> <!-- "align=left" is implied -->
      <Menu.Item key="10">nav 1</Menu.Item>
      <Menu.Item key="11">nav 2</Menu.Item>
      <Menu.Item key="12">nav 3</Menu.Item>
    </Menu.Group>
    <Menu.Group align="right">
      <Menu.Item key="20">Account</Menu.Item>
      <Menu.Item key="21">Logout</Menu.Item>
    </Menu.Group>
  </Menu>
</Header>

I guess for completness it would also be possible to have align=center to display the group of items in the centre of the menu. Obviously, this proposal only makes sense for Menu’s with mode=horizontal.

[Sirri69]

+1 We need this. There are many workarounds but won’t it make sense if it was built into the library ? 😐

[vjpr]

Here is an example of centered and right-aligned menu items as mentioned by blackfry and adapted from https://stackoverflow.com/questions/56206061/how-to-center-menu-item-in-navbar-like-example.

const centerStyle = {
  position: 'relative',
  display: 'flex',
  justifyContent: 'center',
}
const rightStyle = {position: 'absolute', top: 0, right: 0}

return (
  <div>
  <Menu selectable={false} mode='horizontal' style={centerStyle}>
    <MenuItem>Centered</MenuItem>
  </Menu>
  <Menu selectable={false} mode='horizontal' style={rightStyle}>
    <MenuItem>Right</MenuItem>
  </Menu>
  </div>
)