CloudReports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
CloudReports
No Result
View All Result
Home Ant Design tutorial Layout and Routing

Ant Design – Side Navigation and Routing

npn by npn
November 20, 2020
in Layout and Routing, Ant Design tutorial, Web development
Reading Time: 3 mins read
0
Ant Design – Side Navigation and Routing
2.1k
VIEWS
Share on FacebookShare on Twitter
5/5 - (1 vote)

What is layout navigation

The navigation menu is the soul of a website, and users rely on navigation to jump between pages.

Generally divided into top navigation and side navigation. The top navigation provides global categories and functions, and the side navigation provides a multi-level structure to store and arrange the site structure.

How to implement side navigation

First, let’s look at the most common navigation components. You will find that navigation is also composed of multiple components, such as the Sider sidebar component, Logo website logo component, SubMenu submenu, MenuItem menu option, and so on.

ADVERTISEMENT
Ant Design Sider

We modify on the basis of the code in the previous section and add the Menu item to the Sider component. The complete code of an ordinary navigation menu is as follows:

// Note that in addition to introducing the Layout component from antd, we also introduced the Menu component, Icon icon component

import { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

// Introduce submenu components
const SubMenu = Menu.SubMenu;

export default class BasicLayout extends Component {
  render() {
    return (
      <Layout>
        <Sider width={256} style={{ minHeight: '100vh' }}>
          <div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px' }} />
          <Menu theme='dark' mode='inline' defaultSelectedKeys={['1']}>
            <Menu.Item key='1'>
              <Icon type='pie-chart' />
              <span>Helloworld</span>
            </Menu.Item>
            <SubMenu
              key='sub1'
              title={
                <span>
                  <Icon type='dashboard' />
                  <span>Dashboard</span>
                </span>
              }>
              <Menu.Item key='2'>Analysis page</Menu.Item>
              <Menu.Item key='3'>Monitoring page</Menu.Item>
              <Menu.Item key='4'>Workbench</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
          <Content style={{ margin: '24px 16px 0' }}>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>{this.props.children}</div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

In the above code, Menu is a subcomponent of Sider, SubMenu is a subcomponent of Menu and Menu.Item is the smallest navigation option.
The effect of running the above code is as follows:

Ant Design custom sidebar menu

Congratulations, so far we have realized the sidebar display of navigation. In the next section, we will configure the routing so that when the corresponding navigation option is clicked, the page displays the corresponding information.

Tags: ant navigationant sidebarant sider
Previous Post

AntD Basic layout – Create Website layout with Ant Design

Next Post

TIOBE ranking: Python should be voted language of the year 2020

npn

npn

Next Post
TIOBE ranking: Python should be voted language of the year 2020

TIOBE ranking: Python should be voted language of the year 2020

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)

Search

No Result
View All Result
  • About Us
  • Documentation
Together We Learn!

© 2021 Cloudreports - Developer ideas, tips and stories...

No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner

© 2021 Cloudreports - Developer ideas, tips and stories...