Narwhals Poke Mammals

    TypeScript icon, indicating that this package has built-in type declarations

    3.2.3 • Public • Published

    Ant Design Pro Layout

    NPM version Vue Support Vue Grammar Level NPM downloads License

    💻 Preview layout:

    Basic Usage

    Recommend look Examples or Use Template



    # yarn
    yarn add @ant-design-vue/pro-layout
    # npm
    npm i @ant-design-vue/pro-layout -S

    Simple Usage

    First, you should add the @ant-design-vue/pro-layout that you need into the library.

    // main.[js|ts]
    import '@ant-design-vue/pro-layout/dist/style.css'; // pro-layout css or style.less
    import { createApp } from 'vue';
    import App from "./App.vue";
    import Antd from 'ant-design-vue';
    import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';
    const app = createApp(App);

    After that, you can use pro-layout in your Vue components as simply as this:

        <router-view />
    <script setup lang="ts">
    import { reactive, useRouter } from 'vue';
    import { getMenuData, clearMenuItem } from '@ant-design-vue/pro-layout';
    const locale = (i18n: string) => i18n;
    const router = useRouter();
    const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
    const state = reactive({
      collapsed: false, // default value
      openKeys: ['/dashboard'],
      selectedKeys: ['/welcome'],
    const layoutConf = reactive({
      navTheme: 'dark',
      layout: 'mix',
      splitMenus: false,



    Property Description Type Default Value
    title layout in the upper left corner title VNode | String 'Ant Design Pro'
    logo layout top left logo url VNode | render -
    loading layout loading status boolean -
    layout layout menu mode, sidemenu: right navigation, topmenu: top navigation 'side' | 'top' | 'mix' 'side'
    contentWidth content mode of layout, Fluid: adaptive, Fixed: fixed width 1200px 'Fixed' | 'Fluid' Fluid
    navTheme Navigation theme 'light' |'dark' 'light'
    headerTheme Header Bar theme 'light' |'dark' 'light'
    menuData Vue-router routes prop Object [{}]
    collapsed control menu's collapse and expansion boolean true
    selectedKeys menu selected keys string[] []
    openKeys menu openKeys string[] []
    isMobile is mobile boolean false
    onCollapse | @collapse folding collapse event of menu (collapsed: boolean) => void -
    menuHeaderRender render header logo and title v-slot | VNode | (logo,title)=>VNode | false -
    menuExtraRender render extra menu item v-slot | VNode | (props)=>VNode | false -
    menuFooterRender render footer menu item v-slot | VNode | (props)=>VNode | false -
    headerContentRender custom header render method slot | (props: BasicLayoutProps) => VNode -
    rightContentRender header right content render method slot | (props: HeaderViewProps) => VNode -
    collapsedButtonRender custom collapsed button method slot | (collapsed: boolean) => VNode -
    footerRender custom footer render method slot | (props: BasicLayoutProps) => VNode false
    breadcrumbRender custom breadcrumb render method slot | ({ route, params, routes, paths, h }) => VNode[] -
    menuItemRender custom render Menu.Item v-slot#menuItemRender="{ item, icon }" | ({ item, icon }) => VNode null
    subMenuItemRender custom render Menu.SubItem v-slot#subMenuItemRender="{ item, icon }" | ({ item, icon }) => VNode null
    locale i18n Function (key: string) => string | false false

    Menu generation requires getMenuData and clearMenuItem function e.g. const { menuData } = getMenuData(clearMenuItem(routes))


    Property Description Type Default Value
    content Content area VNode | v-slot -
    extra Extra content area, on the right side of content VNode | v-slot -
    extraContent Extra content area, on the right side of content VNode | v-slot -
    tabList Tabs title list Array<{key: string, tab: sting}> -
    tab-change Switch panel callback (key) => void -
    tab-active-key The currently highlighted tab item string -


    Property Description Type Default Value
    markStyle mark style CSSProperties -
    markClassName mark class string -
    gapX Horizontal spacing between water-mark number 212
    gapY Vertical spacing between watermark number 222
    offsetLeft Horizontal offset number offsetTop = gapX / 2
    offsetTop Vertical offset number offsetTop = gapY / 2
    width number 120
    height number 64
    rotate Angle of rotation, unit ° number -22
    image image src string -
    zIndex water-mark z-index number 9
    content water-mark Content string -
    fontColor font-color string rgba(0,0,0,.15)
    fontSize font-size string|number 16

    Custom Render

    Custom rightContentRender

    <template #rightContentRender>
      <div style="margin-right: 12px">
        <a-avatar shape="square" size="small">
          <template #icon>
            <UserOutlined />

    Custom menu.item

    <template #menuItemRender="{ item, icon }">
        <router-link :to="{ path: item.path }">
          <span class="ant-pro-menu-item">
            <a-badge count="5" dot>
              <span class="ant-pro-menu-item-title">{{ item.meta.title }}</span>

    Custom menuExtraRender

    <template #menuExtraRender="{ collapsed }">
      <a-input-search v-if="!collapsed" />

    Custom menuFooterRender

    <template #menuFooterRender>
      <div>menu footer</div>

    Custom breadcrumbRender

    <template #breadcrumbRender="{ route, params, routes }">
      <span v-if="routes.indexOf(route) === routes.length - 1">
        {{ route.breadcrumbName }}
      <router-link v-else :to="{ path: route.path, params }">
        {{ route.breadcrumbName }}

    Custom collapsedButtonRender

    <template #collapsedButtonRender="collapsed">
      <HeartOutlined v-if="collapsed" />
      <SmileOutlined v-else />

    Custom footer with slot

      <template #links>
      <template #copyright>
        <span>Pro Layout &copy; 2021 Sendya.</span>

    Custom footer with props

    <GlobalFooter :links="[{ title: 'Link 1', href: '#' }, { title: 'Link 2', href: '#' }]" copyright="Pro Layout &copy; 2021 Sendya." />

    Use WaterMark

    <router-view v-slot="{ Component }">
      <WaterMark content="Pro Layout">
        <component :is="Component" />

    Build project

    pnpm build # Build library and .d.ts




    npm i @ant-design-vue/pro-layout

    DownloadsWeekly Downloads






    Unpacked Size

    1.18 MB

    Total Files


    Last publish


    • sendya
    • amour1688
    • tangjinzhou