Navigation bars are a user interface elements typically located at the top of a website or application, containing links or buttons that allow users to navigate and access different sections, pages, or features of the site or app.
import React from "react";
import { theme } from "antd";
const { useToken } = theme;
const Logo = ({ showText, whiteText }) => {
const { token } = useToken();
return (
<svg
width="116"
height="24"
viewBox="0 0 97 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.133942" width="20" height="20" rx="4" fill="#1890FF" />
<path
d="M12.1339 3.00195H17.1339V8.00195H12.1339V3.00195Z"
fill="white"
/>
<path d="M8.13394 8.00195H12.1339V12.002H8.13394V8.00195Z" fill="white" />
<path d="M3.13394 11.002H9.13394V17.002H3.13394V11.002Z" fill="white" />
<g style={{ display: showText ? "block" : "none" }}>
<path
d="M31.6547 14.5L31.0191 12.6873H27.7352L27.0878 14.5H25.2869L28.4649 6.04883H30.4188L33.5733 14.5H31.6547ZM29.3948 8.00272L28.2413 11.2631H30.5248L29.3948 8.00272Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M36.0977 11.0748V14.5H34.4616V8.21459H35.9682V9.10914C36.4273 8.48531 37.0746 8.09688 37.8986 8.09688C39.158 8.09688 40.029 8.92081 40.029 10.4392V14.5H38.4047V10.9924C38.4047 10.0625 38.0398 9.54465 37.2983 9.54465C36.6509 9.54465 36.0977 10.0625 36.0977 11.0748Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M45.3006 12.911V14.3352C44.9004 14.5353 44.5238 14.6177 44.0412 14.6177C42.7464 14.6177 41.9343 13.8762 41.9343 12.4637V9.61527H40.6631V8.21459H41.9343V6.35486H43.5586V8.21459H45.3595V9.61527H43.5586V12.0871C43.5586 12.8168 43.8882 13.1111 44.4767 13.1111C44.7827 13.1111 45.0652 13.0405 45.3006 12.911Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M52.8204 12.0164C52.8204 13.5819 51.6669 14.5 49.8072 14.5H46.4997V6.04883H49.6777C51.4551 6.04883 52.5497 6.84922 52.5497 8.29698C52.5497 9.07383 52.1142 9.69766 51.3609 10.0861C52.3025 10.4157 52.8204 11.0866 52.8204 12.0164ZM49.5365 7.46128H48.124V9.42694H49.5365C50.4075 9.42694 50.8548 9.05029 50.8548 8.43823C50.8548 7.83793 50.4075 7.46128 49.5365 7.46128ZM49.666 10.8512H48.124V13.0875H49.666C50.6311 13.0875 51.1373 12.6638 51.1373 11.9458C51.1373 11.2749 50.6311 10.8512 49.666 10.8512Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M55.6272 14.5H53.9794V6.04883H55.6272V14.5Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M59.8722 14.6177C58.0478 14.6177 56.6824 13.1817 56.6824 11.3573C56.6824 9.5211 58.0478 8.09688 59.8722 8.09688C61.6966 8.09688 63.062 9.5211 63.062 11.3573C63.062 13.1817 61.6966 14.6177 59.8722 14.6177ZM59.8722 13.1699C60.6844 13.1699 61.3788 12.5226 61.3788 11.3573C61.3788 10.192 60.6844 9.55642 59.8722 9.55642C59.0601 9.55642 58.3656 10.192 58.3656 11.3573C58.3656 12.5226 59.0601 13.1699 59.8722 13.1699Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M66.7544 14.6177C64.9418 14.6177 63.6941 13.2759 63.6941 11.3573C63.6941 9.47402 64.9889 8.09688 66.7544 8.09688C68.3905 8.09688 69.6029 9.2033 69.803 10.8982H68.0845C68.0021 10.0625 67.496 9.54465 66.7544 9.54465C65.907 9.54465 65.3655 10.2391 65.3655 11.3573C65.3655 12.4873 65.8952 13.1699 66.7544 13.1699C67.5077 13.1699 67.9903 12.6756 68.0845 11.8163H69.803C69.6146 13.5466 68.4376 14.6177 66.7544 14.6177Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M72.4895 14.5H70.8534V6.04883H72.4895V10.8747L74.7847 8.21459H76.668L74.0667 11.2278L76.974 14.5H74.8906L72.4895 11.5809V14.5Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M82.6793 12.4873C82.6793 13.8055 81.6788 14.6177 79.8897 14.6177C78.1006 14.6177 77.1001 13.7585 76.9706 12.3578H78.5361C78.5478 13.0052 79.1011 13.4171 79.9132 13.4171C80.5488 13.4171 81.0314 13.217 81.0314 12.7697C81.0314 12.3695 80.7725 12.2048 80.1722 12.0871L79.0422 11.8752C77.9122 11.6751 77.2296 11.0513 77.2296 10.0743C77.2296 8.90904 78.23 8.09688 79.7955 8.09688C81.3727 8.09688 82.4556 8.93258 82.5733 10.2862H81.0079C80.949 9.67412 80.49 9.29747 79.7955 9.29747C79.1952 9.29747 78.795 9.5211 78.795 9.9213C78.795 10.298 79.054 10.451 79.619 10.5569L80.8313 10.7805C82.0554 11.0159 82.6793 11.5809 82.6793 12.4873Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M93.3301 6.04883V11.2867C93.3301 13.2876 92.0589 14.6766 89.8578 14.6766C87.6215 14.6766 86.3738 13.2876 86.3738 11.2867V6.04883H88.1629V11.322C88.1629 12.3695 88.669 13.0758 89.8578 13.0758C91.0349 13.0758 91.541 12.3695 91.541 11.322V6.04883H93.3301Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
<path
d="M96.8304 14.5H95.0412V6.04883H96.8304V14.5Z"
fill={whiteText ? "#ffffff" : token.colorText}
/>
</g>
</svg>
);
}
export default Logo;
import React, { useState } from "react";
import { Button, Grid, Menu, Space, theme } from "antd";
import { MenuOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const menuItems = [
{
label: "Projects",
key: "projects",
},
{
label: "Dashboard",
key: "dashboard",
},
{
label: "Products",
key: "SubMenu",
children: [
{
label: "Ant Design System",
key: "product:1",
},
{
label: "Ant Design Charts",
key: "product:2",
},
],
},
{
label: "Settings",
key: "alipay",
},
];
const [current, setCurrent] = useState("projects");
const onClick = (e) => {
console.log("click ", e);
setCurrent(e.key);
};
const styles = {
container: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
position: "relative"
},
logo: {
display: "block",
height: token.sizeLG,
left: "50%",
position: screens.md ? "static" : "absolute",
top: "50%",
transform: screens.md ? " " : "translate(-50%, -50%)"
},
menu: {
backgroundColor: "transparent",
borderBottom: "none",
lineHeight: screens.sm ? "4rem" : "3.5rem",
marginLeft: screens.md ? "0px" : `-${token.size}px`,
width: screens.md ? "inherit" : token.sizeXXL
},
menuContainer: {
alignItems: "center",
display: "flex",
gap: token.size,
width: "100%"
}
};
return (
<nav style={styles.header}>
<div style={styles.container}>
<div style={styles.menuContainer}>
<a style={styles.logo} href="#">
<Logo showText={true} />
</a>
<Menu
style={styles.menu}
mode="horizontal"
items={menuItems}
onClick={onClick}
selectedKeys={screens.md ? [current] : ""}
overflowedIndicator={
<Button type="text" icon={<MenuOutlined />}></Button>
}
/>
</div>
<Space>
{screens.md ? <Button type="text">Log in</Button> : ""}
<Button type="primary">Sign up</Button>
</Space>
</div>
</nav>
);
}
import React, { useState } from "react";
import { Button, Dropdown, Grid, Menu, Space, theme } from "antd";
import { GlobalOutlined, MenuOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const items = [
{
key: "eng",
value: "eng",
label: "🇬🇧 English"
},
{
key: "pl",
value: "pl",
label: "🇵🇱 Polish"
},
{
key: "cn",
value: "cn",
label: "🇨🇳 Chinese"
},
];
const menuItems = [
{
label: "Projects",
key: "projects",
},
{
label: "Dashboard",
key: "dashboard",
},
{
label: "Products",
key: "SubMenu",
children: [
{
label: "Ant Design System",
key: "product:1",
},
{
label: "Ant Design Charts",
key: "product:2",
},
],
},
{
label: "Settings",
key: "settings",
},
];
const [current, setCurrent] = useState("projects");
const onClick = (e) => {
console.log("click ", e);
setCurrent(e.key);
};
const styles = {
container: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
position: "relative"
},
logo: {
display: "block",
height: "24px",
left: "50%",
position: screens.md ? "static" : "absolute",
top: "50%",
transform: screens.md ? " " : "translate(-50%, -50%)"
},
menu: {
backgroundColor: "transparent",
borderBottom: "none",
lineHeight: screens.sm ? "4rem" : "3.5rem",
marginLeft: screens.md ? "0px" : "-1rem",
width: screens.md ? "inherit" : token.sizeXXL
},
menuContainer: {
alignItems: "center",
display: "flex",
gap: token.margin,
width: "100%"
}
};
return (
<nav style={styles.header}>
<div style={styles.container}>
<div style={styles.menuContainer}>
<a style={styles.logo} href="#">
<Logo showText={true} />
</a>
<Menu
style={styles.menu}
mode="horizontal"
items={menuItems}
selectedKeys={screens.md ? [current] : ""}
onClick={onClick}
overflowedIndicator={
<Button type="text" icon={<MenuOutlined />}></Button>
}
/>
</div>
<Space>
<Dropdown menu={{ items, selectable: true }} placement="bottomRight">
<Button type="text" icon={<GlobalOutlined />} />
</Dropdown>
</Space>
</div>
</nav>
);
}
import React, { useState } from "react";
import { Avatar, Button, Dropdown, Grid, Menu, Space, theme } from "antd";
import { BellOutlined, LogoutOutlined, MenuOutlined, SettingOutlined, UserOutlined, WalletOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const items = [
{
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 menuItems = [
{
label: "Projects",
key: "projects",
},
{
label: "Dashboard",
key: "dashboard",
},
{
label: "Products",
key: "SubMenu",
children: [
{
label: "Ant Design System",
key: "product:1",
},
{
label: "Ant Design Charts",
key: "product:2",
},
],
},
{
label: "Settings",
key: "settings",
},
];
const [current, setCurrent] = useState("projects");
const onClick = (e) => {
console.log("click ", e);
setCurrent(e.key);
};
const styles = {
container: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
position: "relative"
},
logo: {
display: "block",
height: "24px",
left: "50%",
position: screens.md ? "static" : "absolute",
top: "50%",
transform: screens.md ? " " : "translate(-50%, -50%)"
},
menu: {
backgroundColor: "transparent",
borderBottom: "none",
lineHeight: screens.sm ? "4rem" : "3.5rem",
marginLeft: screens.md ? "0px" : "-1rem",
width: screens.md ? "inherit" : token.sizeXXL
},
menuContainer: {
alignItems: "center",
display: "flex",
gap: token.margin,
width: "100%"
}
};
return (
<nav style={styles.header}>
<div style={styles.container}>
<div style={styles.menuContainer}>
<a style={styles.logo} href="#">
<Logo showText={true} />
</a>
<Menu
style={styles.menu}
mode="horizontal"
items={menuItems}
selectedKeys={screens.md ? [current] : ""}
onClick={onClick}
overflowedIndicator={
<Button type="text" icon={<MenuOutlined />}></Button>
}
/>
</div>
<Space>
<Button type="text" icon={<BellOutlined />}></Button>
<Dropdown menu={{ items }} 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>
</nav>
);
}
import React, { useState } from "react";
import { Button, Drawer, Grid, Menu, Space, theme } from "antd";
import { MenuOutlined } from "@ant-design/icons";
import Logo from "../../assets/logo"; // You can find the code for the Logo here: https://www.antblocksui.com/blocks/navbars
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const menuItems = [
getItem("Dashboard", "dashboard", null, [
getItem("Overview", "overview"),
getItem("Statistics", "statistics"),
getItem("Reports", "reports"),
getItem("Analytics", "analytics"),
]),
getItem("Products", "products", null, [
getItem("All Products", "all-products"),
getItem("Add Product", "add-product"),
getItem("Categories", "categories", null, [
getItem("Electronics", "electronics"),
getItem("Clothing", "clothing"),
]),
]),
getItem("Settings", "settings", null, [
getItem("General", "general"),
getItem("Security", "security"),
getItem("Notifications", "notifications"),
getItem("Privacy", "privacy"),
]),
];
const styles = {
container: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
header: {
backgroundColor: token.colorBgContainer,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
position: "relative"
},
logo: {
display: "block",
height: token.sizeLG,
left: "50%",
position: screens.md ? "static" : "absolute",
top: "50%",
transform: screens.md ? " " : "translate(-50%, -50%)"
},
menu: {
backgroundColor: "transparent",
border: "none",
lineHeight: screens.sm ? "4rem" : "3.5rem",
width: "100%"
},
menuContainer: {
alignItems: "center",
display: "flex",
gap: token.size,
height: screens.md ? "4rem" : "3.5rem",
width: "100%"
}
};
const navbarMenu = (
<Menu
style={styles.menu}
mode={screens.md ? "horizontal" : "inline"}
inlineCollapsed={false}
items={menuItems}
/>
);
const menuDrawer = (
<>
<Button type="text" icon={<MenuOutlined />} onClick={showDrawer} />
<Drawer
title="Menu"
placement="right"
onClose={onClose}
open={open}
bodyStyle={{ padding: 0 }}
>
{navbarMenu}
</Drawer>
</>
);
return (
<nav style={styles.header}>
<div style={styles.container}>
<div style={styles.menuContainer}>
<a style={styles.logo} href="#">
<Logo showText={true} />
</a>
{screens.md ? navbarMenu : menuDrawer}
</div>
<Space>
{screens.md ? <Button type="text">Log in</Button> : ""}
<Button type="primary">Sign up</Button>
</Space>
</div>
</nav>
);
}
