Create TopNav.js
in components/nav folder. Use ant design's Menu component to create a menu.
// components/nav/Menu.js
import { useState } from "react";
import { Menu } from "antd";
import {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
} from "@ant-design/icons";
import ToggleTheme from "./ToggleTheme";
const { SubMenu } = Menu;
const TopNav = () => {
return (
<Menu
onClick={(e) => setCurrent(e.key)}
selectedKeys={[current]}
mode="horizontal"
theme={theme}
>
<Menu.Item key="mail" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu
key="SubMenu"
icon={<SettingOutlined />}
title="Navigation Three - Submenu"
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
<Menu.Item style={{ marginLeft: "auto" }}>
<ToggleTheme />
</Menu.Item>
</Menu>
);
};
export default TopNav;
Now import and use in _app.js
import TopNav from "../components/nav/TopNav";
const MyApp = ({ Component, pageProps }) => {
return (
<ThemeProvider>
<TopNav />
<Component {...pageProps} />
</ThemeProvider>
);
};