The navbar is very important to a website. It allows users to quickly jump between different pages of the website, and also allows users to quickly find some important information of the website.
You can add a custom navigation menu in themeConfig.nav
, configured as an array, as follows:
The nav bar is configured as an array, and each item in the array is a NavItem
object, which has the following types:
That is, each navbar element ( NavItem
) can be a link ( NavItemWithLink
), or a navbar group containing child elements ( NavItemWithChildren
).
The meanings of the attributes are as follows:
text
- Navbar textlink
- Navbar linkactiveMatch
- Activation rule for navbar linksposition
- Navbar menu item positionAttribute details:
activeMatch
is used to match the current route, when the route matches the activeMatch
rule, the nav item will be highlighted.
By default,
activeMatch
is thelink
attribute of NavItem.
position
is used to configure independent positioning of top menu items, with the following options available:
left
placed in the left menu bar at the top of the menu item;right
pplaced in the right menu bar at the top of the menu item.If the
position
is not configured, it will be placed on the right menu bar by default, which is equivalent to configuringright
.
The meanings of the attributes are as follows:
text
- Navbar textitems
- Subnavbar elementsposition
- Navbar menu item position with child navbar elementsBy default, the navbar will have a toggle button for Light/Dark
mode, you can disable it with the following config:
Social Links to the Site. For example:
For more configurations, please refer to links.