Skip to content

Navbar Section

joe.c.starr edited this page Jan 25, 2024 · 1 revision

When editing be careful to write correctly formatted YAML. In YAML indentation matters. A short intro to YAML can be found here.


Description

The navbar section describes the layout and content of the top navbar/menu. For example if you configure:

  navbar:
    align: ms-auto # No need to change
    disableSearch: false
    stickyNavBar:
      enable : true
      showOnScrollUp : true
    menus:
      disableAbout: false
      disableExperience: false
      disableEducation: false
      disableProjects: true
      disableAchievements: true
      disableContact: true
      main:
        - identifier: Publications
          name: Publications
          title: Publications
          url: /publications
        #Dropdown menu
        - identifier: dropdown
          title: Example dropdown menu
          name: Extras
          children:
            - identifier: Blog
              title: Blog
              name: Blog
              url: /blog
            - identifier: "???"
              title: "???"
              name: "???"
              url: /another_section

gives image

Subsections

align

This controls placement of the bar. No need to change it

  navbar:
    align: ms-auto # No need to change

disableSearch

Disables the search feature for the page.

  navbar:
    ...
    disableSearch: false

stickyNavBar

This subsection controls if the navbar stays at the top of the page or follows the page when scrolling.

  navbar:
    ...
    stickyNavBar:
      enable : true
      showOnScrollUp : true

enable

This enables or disables the navbar sticking to the top of the page.

  navbar:
    stickyNavBar:
      enable : true

showOnScrollUp

This enables or disables the navbar when scrolling back up to the top of the page.

  navbar:
    stickyNavBar:
      ...
      showOnScrollUp : true

menus

This section controls the content of the navbar.

  navbar:
      ...
      menus:
        disableAbout: false
        disableExperience: false
        disableEducation: false
        disableProjects: true
        disableAchievements: true
        disableContact: true
        main:
            - identifier: Publications
            name: Publications
            title: Publications
            url: /publications
            #Dropdown menu
            - identifier: dropdown
            title: Example dropdown menu
            name: Extras
            children:
                - identifier: Blog
                title: Blog
                name: Blog
                url: /blog
                - identifier: "???"
                title: "???"
                name: "???"
                url: /another_section

disable< x >

These sections disable landing page sections in the navbar. If set to true the section will be hidden. Example:

        disableAbout: true

will hide the about me section of the landing page

image

  navbar:
      ...
      menus:
        disableAbout: false
        disableExperience: false
        disableEducation: false
        disableProjects: true
        disableAchievements: true
        disableTalks: false
        disableTeaching: false
        disableContact: true

main

This is a list that lets you link to other pages or collections of pages. Each list item will appear in the navbar. Additionally allows you to configure a dropdown menu in the navbar.

  navbar:
      ...
      menus:
        ...
        main:
          - identifier: Publications
            name: Publications
            title: Publications
            url: /publications
            #Dropdown menu
            - identifier: dropdown
              title: Example dropdown menu
              name: Extras
              children:
                  - identifier: Blog
                    title: Blog
                    name: Blog
                    url: /blog
                  - identifier: "???"
                    title: "???"
                    name: "???"
                    url: /another_section

List entry

Each list entry has 3 required and 2 optional fields.

Required
  • Identifier - is the unique list identifier. Must be unique.
  • Name - Is the string to be displayed in the navbar.
  • title - The hover text for the navbar item (Example dropdown menu) image
  • url - When the navbar entry should link to. Note: this is only configured if the optional children list is not set.
- identifier: Publications
  name: Publications
  title: Publications
  url: /publications
Optional

Optionally the list item can be configured as a dropdown by including a "children" list of navbar entries. Note: A dropdown can only be one level deap.

#Dropdown menu
- identifier: dropdown
    title: Example dropdown menu
    name: Extras
    children:
        - identifier: Blog
        title: Blog
        name: Blog
        url: /blog
        - identifier: "???"
        title: "???"
        name: "???"
        url: /another_section

Configuration

True and false fields should be configured to true or false.

The menus.main list should be configured as a valid YAML list.