ProLayout API

ProLayout provides a standard layout for admin interfaces with sidebar navigation, header, and content areas.

ProLayoutProps

title

string | React.ReactNode

default:"Ant Design Pro"

Site title displayed in the sidebar header.

logo

string | React.ReactNode

Logo displayed in the sidebar header.

boolean

default:"false"

Loading state for the layout.

layout

'side' | 'top' | 'mix'

default:"side"

Navigation layout type.

side - Sidebar navigation
top - Top navigation
mix - Mixed navigation (sidebar + top)

navTheme

'light' | 'dark' | 'realDark'

default:"dark"

Navigation theme.

light - Light theme
dark - Dark sidebar with light header
realDark - Dark sidebar and header

contentWidth

'Fluid' | 'Fixed'

default:"Fluid"

Content area width.

Fluid - Full width
Fixed - Fixed width (1200px)

fixedHeader

boolean

default:"false"

Fix header at the top when scrolling.

fixSiderbar

boolean

default:"false"

Fix sidebar when scrolling.

collapsed

boolean

Controlled sidebar collapsed state.

defaultCollapsed

boolean

default:"false"

Default sidebar collapsed state.

onCollapse

function

Callback when sidebar collapse state changes.

(collapsed: boolean) => void

collapsedButtonRender

function | false

Custom render for collapse button.

(collapsed: boolean) => React.ReactNode

Set to false to hide.

breakpoint

Breakpoint

default:"lg"

Breakpoint for responsive behavior.

type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'

isMobile

boolean

Whether the layout is in mobile mode.

Custom render for menu header (logo area).

(logo: React.ReactNode, title: React.ReactNode, props: ProLayoutProps) => React.ReactNode

Set to false to hide.

Custom render for menu footer.

(props: ProLayoutProps) => React.ReactNode

Custom render for extra content above menu items.

(props: ProLayoutProps) => React.ReactNode

Custom render for entire menu content.

(props: ProLayoutProps, defaultDom: React.ReactNode) => React.ReactNode

Custom render for menu items.

(itemProps: MenuDataItem, defaultDom: React.ReactNode, props: ProLayoutProps) => React.ReactNode

Custom render for submenu items.

(itemProps: MenuDataItem, defaultDom: React.ReactNode) => React.ReactNode

headerRender

function | false

Custom render for header.

(props: ProLayoutProps, defaultDom: React.ReactNode) => React.ReactNode

Set to false to hide.

headerTitleRender

function | false

Custom render for header title.

(logo: React.ReactNode, title: React.ReactNode, props: ProLayoutProps) => React.ReactNode

headerContentRender

function

Custom render for header content area.

(props: ProLayoutProps) => React.ReactNode

rightContentRender

function

Custom render for right side of header.

(props: ProLayoutProps) => React.ReactNode

footerRender

function | false

Custom render for footer.

(props: ProLayoutProps) => React.ReactNode

Set to false to hide.

Custom render for breadcrumb.

(routers: Route[]) => Route[]

pageTitleRender

function | false

Custom render for page title (shown in browser tab).

(props: ProLayoutProps, defaultPageTitle?: string, info?: { title: string; id: string; pageName: string }) => string

onPageChange

function

Callback when page route changes.

(location?: Location) => void

route

Route

Route configuration for menu generation.

type Route = {
  path?: string;
  name?: string;
  icon?: React.ReactNode;
  children?: Route[];
  hideInMenu?: boolean;
  hideChildrenInMenu?: boolean;
  [key: string]: any;
}

Menu configuration.

Show MenuConfig Properties

locale?: boolean - Enable internationalization for menu
defaultOpenAll?: boolean - Open all submenus by default
loading?: boolean - Menu loading state
onLoadingChange?: (loading: boolean) => void - Loading change callback
request?: (params: any, defaultMenuData: MenuDataItem[]) => Promise<MenuDataItem[]> - Load menu from remote
type?: 'sub' | 'group' - Submenu type
autoClose?: boolean - Auto close other menus when opening one

Transform menu data before rendering.

(menuData: MenuDataItem[]) => MenuDataItem[]

location

{ pathname?: string }

Current location for menu selection.

MenuDataItem

Configuration for individual menu items.

name

string

Menu item name/label.

path

string

Menu item path/route.

icon

React.ReactNode

Menu item icon.

children

MenuDataItem[]

Child menu items.

Hide this item in menu.

Hide child items in menu.

disabled

boolean

default:"false"

Disable menu item.

key

string

Unique key for the menu item.

locale

string | false

Internationalization key for the menu item.

target

string

Link target (e.g., _blank).

parentKeys

string[]

Parent keys to select when this item is active.

Hide self and promote children to same level.

Tooltip for the menu item.

Styling

token

DeepPartial<ProTokenType>

Custom design tokens for theming.

bgLayoutImgList

{ src: string; left?: number; bottom?: number; height?: string }[]

Background images for the layout.

siderWidth

number

default:"256"

Width of the sidebar when expanded.

Hide sidebar when menu is empty.

defaultOpenAll

boolean

default:"false"

Open all submenus by default (deprecated, use menu.defaultOpenAll).

disableMobile

boolean

default:"false"

Disable mobile responsive behavior.

prefixCls

string

default:"ant-pro"

CSS class prefix.

className

string

Additional CSS class.

style

React.CSSProperties

Inline styles.

contentStyle

React.CSSProperties

Inline styles for content area.

ErrorBoundary

React.ComponentType | false

Error boundary component.

Page Container

waterMarkProps

WaterMarkProps

Watermark configuration for the page.

openKeys

string[]

default:"false"

Controlled open submenu keys.

selectedKeys

string[]

Controlled selected menu keys.

onOpenChange

function

Callback when submenu open state changes.

(openKeys: string[]) => void

Callback when menu header (logo area) is clicked.

(e: React.MouseEvent) => void

formatMessage

function

Internationalization formatter.

(message: { id: string; defaultMessage?: string }) => string

links

React.ReactNode[]

Links to display at the bottom of the sidebar.

splitMenus

boolean

default:"false"

Split menus for mix layout.

Usage Examples

Basic Usage
With Header Content
Top Navigation
Dynamic Menu

import { ProLayout } from '@ant-design/pro-components';
import { Link } from 'react-router-dom';

export default () => {
  return (
    <ProLayout
      title="My App"
      logo={<img src="/logo.svg" />}
      route={{
        routes: [
          {
            path: '/dashboard',
            name: 'Dashboard',
            icon: <DashboardOutlined />,
          },
          {
            path: '/users',
            name: 'Users',
            icon: <UserOutlined />,
          },
        ],
      }}
      menuItemRender={(item, dom) => (
        <Link to={item.path || '/'}>{dom}</Link>
      )}
    >
      {/* Page content */}
    </ProLayout>
  );
};

<ProLayout
  title="My App"
  rightContentRender={() => (
    <div>
      <Dropdown menu={{ items: userMenuItems }}>
        <Avatar icon={<UserOutlined />} />
      </Dropdown>
    </div>
  )}
>
  {children}
</ProLayout>

<ProLayout
  menu={{
    request: async () => {
      const menuData = await fetchMenuData();
      return menuData;
    },
  }}
  menuDataRender={(menuData) => {
    // Transform menu data
    return menuData.filter(item => item.access);
  }}
>
  {children}
</ProLayout>

Layout Sub-Components

ProLayout exports several sub-components for building custom layouts.

PageContainer

Container for page content with breadcrumb and page header.

import { PageContainer } from '@ant-design/pro-components';

<PageContainer
  title="Page Title"
  subTitle="Page subtitle"
  extra={[<Button key="1">Action</Button>]}
  breadcrumb={{
    items: [
      { title: 'Home', path: '/' },
      { title: 'Current' },
    ],
  }}
>
  {/* Page content */}
</PageContainer>

Props:

title

string | React.ReactNode

Page title

subTitle

string | React.ReactNode

Page subtitle

extra

React.ReactNode

Extra content in the page header (usually action buttons)

Breadcrumb configuration

boolean

Loading state for the page

FooterToolbar

Fixed footer toolbar for form actions.

import { FooterToolbar } from '@ant-design/pro-components';
import { Button } from 'antd';

<FooterToolbar
  extra={<span>Extra info</span>}
>
  <Button>Cancel</Button>
  <Button type="primary">Submit</Button>
</FooterToolbar>

Props:

extra

React.ReactNode

Extra content on the left side

renderContent

(props, dom) => React.ReactNode

Custom render function for toolbar content

GridContent

Responsive grid content container that respects layout contentWidth.

import { GridContent } from '@ant-design/pro-components';

<GridContent>
  {/* Content auto-adjusts based on layout contentWidth */}
</GridContent>

PageLoading

Loading component for page transitions.

import { PageLoading } from '@ant-design/pro-components';

<PageLoading />

SettingDrawer

Development-only drawer for testing different layout configurations.

import { SettingDrawer } from '@ant-design/pro-components';

const [settings, setSettings] = useState({});

<SettingDrawer
  settings={settings}
  onSettingChange={(changeSetting) => {
    setSettings(changeSetting);
  }}
/>

SettingDrawer should only be used in development. Do not include it in production builds.

DefaultFooter

Default footer component with links and copyright.

import { DefaultFooter } from '@ant-design/pro-components';

<DefaultFooter
  copyright="2024 Ant Design"
  links={[
    {
      key: 'github',
      title: 'GitHub',
      href: 'https://github.com/ant-design/pro-components',
      blankTarget: true,
    },
  ]}
/>

ProBreadcrumb

Breadcrumb component that integrates with routing.

import { ProBreadcrumb } from '@ant-design/pro-components';

<ProBreadcrumb />

ProTable - Data table component
ProCard - Card container
ProForm - Form layouts

Components API

Form Fields API

Utilities

ProLayout

ProLayout API

ProLayoutProps

Menu Configuration

MenuDataItem

Styling

Page Container

Usage Examples

Layout Sub-Components

PageContainer

FooterToolbar

GridContent

PageLoading

SettingDrawer

DefaultFooter

ProBreadcrumb

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProLayout API

​ProLayoutProps

​Menu Configuration

​MenuDataItem

​Styling

​Page Container

​Usage Examples

​Layout Sub-Components

​PageContainer

​FooterToolbar

​GridContent

​PageLoading

​SettingDrawer

​DefaultFooter

​ProBreadcrumb

​Related Components

Build docs developers (and LLMs) love

ProLayout API

ProLayoutProps

Menu Configuration

MenuDataItem

Styling

Page Container

Usage Examples

Layout Sub-Components

PageContainer

FooterToolbar

GridContent

PageLoading

SettingDrawer

DefaultFooter

ProBreadcrumb

Related Components