javascript - Align Menu.Item to bottom inside a Sider - Stack Overflow

admin管理员组

文章数量:1431768

I am using React with Ant Design and I have a vertical Sider containing a Menu.

Is it possible to align Menu.Items to the bottom of the sider/menu? Below is an image of the Sider.

Here's my code:

<Sider 
    className="sider"
    collapsible 
    collapsed={this.state.collapsed}
    onCollapse={this.toggleCollapse}>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.state.currentRoute]}>
            <Menu.Item key="/users">
                <Icon type="user" />
                <span>Brukere</span>
                <Link to='/users' />
            </Menu.Item>
            <Menu.Item key="/secret">
                <Icon type="plus" />
                <span>Registrer ny bruker</span>
                <Link to='/secret' />
            </Menu.Item>
            <Menu.Item key="/Whatevs">
                <Icon type="check" />
                <span>Rapporterte feil</span>
                <Link to='/Whatevs' />
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item  onClick={this.logOut} key="/logOut">
                <Icon type="logout" />
                <span>Logg ut</span>
                <Link to='/admin/login' />
            </Menu.Item>
        </Menu>
</Sider>

I am using React with Ant Design and I have a vertical Sider containing a Menu.

Is it possible to align Menu.Items to the bottom of the sider/menu? Below is an image of the Sider.

Here's my code:

<Sider 
    className="sider"
    collapsible 
    collapsed={this.state.collapsed}
    onCollapse={this.toggleCollapse}>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.state.currentRoute]}>
            <Menu.Item key="/users">
                <Icon type="user" />
                <span>Brukere</span>
                <Link to='/users' />
            </Menu.Item>
            <Menu.Item key="/secret">
                <Icon type="plus" />
                <span>Registrer ny bruker</span>
                <Link to='/secret' />
            </Menu.Item>
            <Menu.Item key="/Whatevs">
                <Icon type="check" />
                <span>Rapporterte feil</span>
                <Link to='/Whatevs' />
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item  onClick={this.logOut} key="/logOut">
                <Icon type="logout" />
                <span>Logg ut</span>
                <Link to='/admin/login' />
            </Menu.Item>
        </Menu>
</Sider>

• javascript
• html
• reactjs
• antd

Share Improve this question Follow edited Jan 29, 2020 at 15:50 Abhilash Chandran 7,51933 gold badges4040 silver badges5555 bronze badges asked Jan 29, 2020 at 15:27 Chris EikremChris Eikrem 60611 gold badge88 silver badges2525 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can add custom css with position absolute and then set bottom = 0

For me I wanted to add a logo at the end of the sidebar so I did like so

<Menu.Item
    title=""
    style={{
        position: 'absolute',
        bottom: 0,
        zIndex: 1,
        transition: 'all 0.2s',
    }}
    key="6"
>
    LOGO
</Menu.Item>

NOTE: I remend you never change antd css directly, unless it's absolutely necessary.

Inspect the element (Crtl+Shift+I) in chrome or whatever browser you are using.

Find what css class is being used for Menu.

Update that css to use display:flex if it is not already using it.

Then add the style flex-direction:column.

After that, for the first Menu.type add style margin-top: auto.

You should have a global css file in React where you can override the css in Ant Design.

It's possible to align the Menu.Items to the bottom of the sider if you change the styles ing from the Antd library. You can always inspect what classes you need to change in Chrome Dev Tools (they all start with .ant). In your .less file change the .ant-menu-dark.ant-menu-inline class:

.ant-menu-dark.ant-menu-inline {
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

I would also add a margin to the bottom of your last menu item, otherwise it will stay in the very bottom corner of the screen:

.ant-menu-dark.ant-menu-inline .ant-menu-item:last-child {
    margin-bottom: 40px;
}

This is how it looks now:

It is hard to edit menu items inside a single menu. Instead, create two separate menus. One will hold items that will appear at the top, the other for the bottom items.

<StyledMenuContainer>
    <Menu theme='dark' defaultSelectedKeys={["Orders"]} items={["Orders", "User"].map(menuKey => ({ label: menuKey, key: menuKey }))} />
    <Menu theme='dark' items={["Settings", "Logout"].map(menuKey => ({ label: menuKey, key: menuKey }))} />
</StyledMenuContainer>;

StyledMenuContainer will justify each of the menus to the opposite side with space-between.

const StyledMenuContainer = styled('div', {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  height: 'calc(100% - 64px)',
});

You need to be careful about the height of the container. If you have a logo on the sider, then subtract its height from the container. Eventually, you will have your desired oute.

本文标签： javascriptAlign MenuItem to bottom inside a SiderStack Overflow