How to right-align menu items in Ant Design?

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.

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