App headers are positioned at the top of an application's window or interface, typically navigation, controls, and relevant information to facilitate user interaction and navigation within the application.
import React from "react";
import { Button, Divider, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
tagline: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
margin: "0px"
},
titleWrapper: {
alignItems: screens.md ? "flex-end" : "flex-start",
justifyContent: "space-between",
width: "100%"
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.titleWrapper}
>
<Space direction="vertical">
<Text style={styles.tagline}>Tagline</Text>
<Title block style={styles.title}>
Page title
</Title>
</Space>
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Breadcrumb, Button, Divider, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
margin: "0px"
},
wrapper: {
alignItems: screens.lg ? "center" : "start",
justifyContent: "space-between",
marginTop: token.marginLG,
width: "100%"
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "Category",
},
{
title: "Current page",
},
]}
/>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.wrapper}
>
<Title style={styles.title}>Page title</Title>
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Breadcrumb, Button, Divider, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
textWrapper: {
maxWidth: screens.md ? "70%" : "100%"
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
marginBottom: token.marginXS
},
wrapper: {
alignItems: screens.md ? "flex-end" : "flex-start",
justifyContent: "space-between",
width: "100%"
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "Category",
},
{
title: "Current page",
},
]}
/>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.wrapper}
>
<Space style={styles.textWrapper} direction="vertical">
<Title style={styles.title}>Page title</Title>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
hendrerit ex vitae sodales.
</Text>
</Space>
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Breadcrumb, Divider, Grid, Input, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const { Search } = Input;
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
margin: 0
},
titleWrapper: {
justifyContent: "space-between",
marginTop: token.marginLG,
width: "100%"
}
};
const onSearch = (value) => console.log(value);
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "Category",
},
{
title: "Current page",
},
]}
/>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.titleWrapper}
>
<Title style={styles.title}>Page title</Title>
<Search
placeholder="Search"
onSearch={onSearch}
style={{
width: screens.md ? 264 : "100%",
}}
/>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Avatar, Button, Divider, Dropdown, Grid, Space, theme, Typography } from "antd";
import { MoreOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const items = [
{
label: "Action 1",
key: "1",
type: "primary",
},
{
label: "Action 2",
key: "2",
type: "default",
},
{
label: "Action 3",
key: "3",
type: "default",
},
];
const menuProps = {
items,
};
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
tagline: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.lg ? token.fontSizeHeading2 : token.fontSizeHeading4,
margin: "0px"
},
titleWrapper: {
justifyContent: "space-between",
width: "100%"
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Space
size="middle"
direction="horizontal"
style={styles.titleWrapper}
>
<Space size={screens.lg ? "middle" : "small"}>
<Avatar
size={screens.lg ? token.sizeXL * 2 : token.sizeXXL}
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1661&q=80"
/>
<Space direction="vertical" size={token.sizeXXS}>
<Text style={styles.tagline}>Your account</Text>
<Title style={styles.title}>Jane Doroszewicz</Title>
</Space>
</Space>
{screens.lg ? (
<Space>
{items
.slice()
.reverse()
.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space>
) : (
<Dropdown menu={menuProps} placement="bottomRight" arrow>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React, { useState } from "react";
import { Button, Grid, Menu, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [current, setCurrent] = useState("general");
const onClick = (e) => {
console.log("click ", e);
setCurrent(e.key);
};
const items = [
{
label: "General",
key: "general",
},
{
label: "Labels",
key: "labels",
},
{
label: "Inbox",
key: "inbox",
},
{
label: "Account",
key: "account",
},
{
label: "Advanced",
key: "advanced",
},
];
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
paddingTop: token.paddingLG
},
menu: {
borderBottom: 0,
margin: `${token.margin}px ${-token.margin}px 0 ${-token.margin}px`
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
textWrapper: {
width: "100%"
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
marginBottom: token.marginXXS,
marginTop: 0
},
wrapper: {
alignContent: "center",
alignItems: screens.md ? "flex-end" : "flex-start",
justifyContent: "space-between",
width: "100%"
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.wrapper}
>
<Space style={styles.textWrapper} direction="vertical" size={4}>
<Title style={styles.title}>Settings</Title>
<Text style={styles.paragraph}>
Customize various options and preferences within an application.
</Text>
</Space>
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
</Space>
<Menu
style={styles.menu}
onClick={onClick}
mode="horizontal"
defaultSelectedKeys={['general']}
items={items}
/>
</div>
</div>
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Button, Divider, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
textWrapper: {
maxWidth: screens.md ? "70%" : "100%"
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
marginBottom: token.marginXXS,
marginTop: 0
},
titleWrapper: {
alignItems: screens.md ? "flex-end" : "flex-start",
justifyContent: "space-between",
width: "100%"
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Space
size="middle"
direction={screens.md ? "horizontal" : "vertical"}
style={styles.titleWrapper}
>
<Space style={styles.textWrapper} direction="vertical" size="small">
<Title style={styles.title}>Page title</Title>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
hendrerit ex vitae sodales. Lorem ipsum dolor sit amet.
</Text>
</Space>
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Avatar, Breadcrumb, Button, Divider, Dropdown, Grid, Input, Space, theme, Typography } from "antd";
import { BellOutlined, LogoutOutlined, MoreOutlined, SearchOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onSearch = (value) => console.log(value);
const profileMenuItems = [
{
label: "Profile",
icon: <UserOutlined />,
key: "0",
},
{
label: "Settings",
icon: <SettingOutlined />,
key: "1",
},
{
label: "Billing",
icon: <WalletOutlined />,
key: "2",
},
{
type: "divider",
},
{
label: "Logout",
icon: <LogoutOutlined />,
key: "3",
},
];
const actions = [
{
label: "Action 1",
key: "1",
type: "primary",
},
{
label: "Action 2",
key: "2",
type: "default",
},
{
label: "Action 3",
key: "3",
type: "default",
},
];
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
margin: "0px"
},
topBar: {
backgroundColor: token.colorBgContainer,
padding: screens.sm ? `${token.padding}px 0px` : `${token.paddingSM}px 0px`,
position: "relative"
},
topBarContainer: {
display: "flex",
gap: token.marginXS,
justifyContent: "space-between",
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
wrapper: {
alignItems: screens.lg ? "center" : "start",
justifyContent: "space-between",
marginTop: token.marginLG,
width: "100%"
}
};
return (
<>
<div style={styles.topBar}>
<div style={styles.topBarContainer}>
<Input
placeholder="Search..."
onSearch={onSearch}
prefix={<SearchOutlined />}
style={{
width: 240,
}}
/>
<Space>
<Button type="text" icon={<BellOutlined />}></Button>
<Dropdown
menu={{ items: profileMenuItems }}
placement="bottomRight"
>
<Avatar src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1661&q=80" />
</Dropdown>
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.header}>
<div style={styles.container}>
<Breadcrumb
items={[
{
title: "Home",
},
{
title: "Category",
},
{
title: "Current page",
},
]}
/>
<Space size="middle" direction="horizontal" style={styles.wrapper}>
<Title style={styles.title}>Page title</Title>
{screens.lg ? (
<Space>
{actions
.slice()
.reverse()
.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space>
) : (
<Dropdown menu={{ items: actions }} placement="bottomRight" arrow>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
import React from "react";
import { Flex, Button, Divider, Dropdown, Grid, Space, theme, Typography } from "antd";
import { MoreOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const actions = [
{
label: "Action 1",
key: "1",
type: "primary",
},
{
label: "Action 2",
key: "2",
type: "default",
},
{
label: "Action 3",
key: "3",
type: "default",
},
];
const informations = [
{
label: "Info 1",
key: "1",
icon: <WalletOutlined />
},
{
label: "Info 2",
key: "2",
icon: <UserOutlined />
},
{
label: "Info 3",
key: "3",
icon: <SettingOutlined />
}
]
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
divider: {
margin: 0
},
header: {
backgroundColor: token.colorBgContainer,
padding: `${token.paddingLG}px 0px`
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
margin: "0px"
},
wrapper: {
alignItems: screens.lg ? "center" : "start",
justifyContent: "space-between",
marginTop: token.marginLG,
width: "100%"
},
infoItem: {
display: "flex",
gap: token.marginXS,
color: token.colorTextSecondary,
fontSize: token.fontSize
}
};
return (
<>
<div style={styles.header}>
<div style={styles.container}>
<Space size="middle" direction="horizontal" style={styles.wrapper}>
<Flex vertical gap={token.marginMD}>
<Title style={styles.title}>Page title</Title>
<Flex vertical={screens.md ? false : true} gap="middle">
{informations.map(info => (
<div style={styles.infoItem}>{info.icon} {info.label}</div>
))}
</Flex>
</Flex>
{screens.lg ? (
<Space>
{actions
.slice()
.reverse()
.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space>
) : (
<Dropdown menu={{ items: actions }} placement="bottomRight" arrow>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
</Space>
</div>
</div>
<Divider style={styles.divider} />
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
</div>
</div>
</>
);
}
