How to right-align menu items in Ant Design? - reactjs

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">
Navigation Four - Link
</Menu.Item>
</Menu>
);
}
}
ReactDOM.render(<App />, mountNode);

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

This will solve the issue:
style={{ marginLeft: 'auto' }}

Answer 5

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