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); 

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.