Support one level of dropdown menus in the navbar
A `main` menu entry with child entries (others with `parent:` set) is now rendered as a Bootstrap dropdown; flat entries are unchanged. Active-state highlighting is trailing-slash tolerant and marks the dropdown parent active when one of its children is the current page. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -34,6 +34,37 @@ Optional params: `title`, `height` (a CSS length such as `60vh`, which
|
||||
crops the image with `object-fit: cover`) and `class`.
|
||||
|
||||
|
||||
## Navigation
|
||||
|
||||
The navbar renders the `main` menu. A top-level entry that has child
|
||||
entries (other entries pointing at it with `parent:`) is rendered as a
|
||||
Bootstrap dropdown; entries without children stay as plain links. Only
|
||||
one level of nesting is supported (Bootstrap 5 has no nested submenus).
|
||||
|
||||
```yaml
|
||||
# hugo.yaml / menus.yaml
|
||||
menu:
|
||||
main:
|
||||
- name: Home
|
||||
pageRef: /
|
||||
weight: 1
|
||||
- name: Research
|
||||
weight: 2
|
||||
- name: Proposals
|
||||
parent: Research
|
||||
pageRef: /proposals
|
||||
weight: 1
|
||||
- name: History
|
||||
parent: Research
|
||||
pageRef: /history
|
||||
weight: 2
|
||||
```
|
||||
|
||||
The entry matching the current page (and its parent, for a dropdown
|
||||
child) gets Bootstrap's `active` class. A parent entry acts only as the
|
||||
dropdown toggle, so it does not need its own `url`/`pageRef`.
|
||||
|
||||
|
||||
## Custom error page
|
||||
|
||||
The theme has a custom 404 error page.
|
||||
|
||||
Reference in New Issue
Block a user