How to right-align menu items in Ant Design?

Question

There is an open Git issue requesting props for the alignment of Menu items. In the meantime, what is the correct way to move some Navbar items (eg Login, logout) to the right side?

Here is there example code for a Menu, where all Menu items are on the left side.

import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class App extends React.Component {
  state = {
    current: 'mail',
  }
  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }
  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="mail">
          <Icon type="mail" />Navigation One
        </Menu.Item>
        <Menu.Item key="app" disabled>
          <Icon type="appstore" />Navigation Two
        </Menu.Item>
        <SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
          <MenuItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
        </Menu.Item>
      </Menu>
    );
  }
}

ReactDOM.render(<App />, mountNode);

score 47 · Accepted Answer · edited Oct 25 '18 at 04:29

Try giving the menu items you want on the right float: right via JSX styling or a CSS class.

Example pulling the Navigation Three item to the right with JSX inline styling, style={{float: 'right'}}:

    <SubMenu style={{float: 'right'}} title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
      <MenuItemGroup title="Item 1">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
      </MenuItemGroup>
      <MenuItemGroup title="Item 2">
        <Menu.Item key="setting:3">Option 3</Menu.Item>
        <Menu.Item key="setting:4">Option 4</Menu.Item>
      </MenuItemGroup>
    </SubMenu>

UPDATE: (for Firefox):

If you have right and left menu elements, you need to add
style={{float: 'right'}} to the right MenuItem's and
style={{float: 'left'}} to the left ones.

Leaving out the latter will cause some browsers (Firefox) to render the underlying <li> tags with a break between them.

This results in the options appearing in reverse order for me when using the "horizontal" menu mode. — Arnaud H, Feb 21 '20 at 13:36

score 19 · Answer 2 · answered Aug 31 '21 at 07:31

19

Due to some change in Ant design 4.16.3, style={{float: 'right'}} won't work anymore.

Instead, you can use style={{ marginLeft: 'auto' }}.

Source: Github issue

answered Aug 31 '21 at 07:31

Frazze

251
3
4

Stanjhae · Answer 3 · 2023-01-03T09:56:40.080

3

You can also use style={{justifyContent: 'flex-end'}}.

marginLeft: 'auto' didn't work for me because I needed to apply it to Menu rather than SubMenu

edited Jan 03 '23 at 09:56

answered Aug 23 '22 at 17:15

Stanjhae

255
2
7

This works like charm. Float right also works but has bug, it cannot render the overflow of the horizontal menu. So this answer is best for 2023. – Mohit S May 11 '23 at 10:36
Confirmed, in 2023, this is the best answer – jessebs Jul 30 '23 at 04:01

score 3 · Answer 4 · answered Sep 11 '22 at 12:46

None of answers work if you want to align several items left and several right. To do so, add style={{ display: 'block' }} to <Menu> and style={{ float: 'right' }} to <Menu.Item> you want on the right. Works for horizontal menu, didn't tried on vertical...

<Menu style={{ display: 'block' }}>
  <Menu.Item key='home'><Link to={'/'}>Home</Link></Menu.Item>
  <Menu.Item key='option1'><Link to={'/option1'}>Option 1</Link></Menu.Item>
  <Menu.Item key='notif' style={{ float: 'right' }}>
    <Link to={'/notif'}>Notifications</Link>
  </Menu.Item>
  <Menu.Item key='logout' style={{ float: 'right' }}>
    <Link to={'/notif'}>Logout</Link>
  </Menu.Item>
</Menu>

score 2 · Answer 5 · edited Jan 21 '22 at 15:16

2

This will solve the issue:

style={{ marginLeft: 'auto' }}

edited Jan 21 '22 at 15:16

NeERAJ TK

2,447
1
11
25

answered Jan 20 '22 at 16:08

Mizanur Rahman

97
1
4

2

This has already been mentioned in https://stackoverflow.com/a/68994581/2227743 no? – Eric Aya Jan 20 '22 at 16:23

How to right-align menu items in Ant Design?

5 Answers5

UPDATE: (for Firefox):