Navbar

The navbar is the top navigation part of the website.

Main options

Template:

  navbar:
    #Title on top left of navbar
    title: Title
    #Image left of title
    logo: "images/logo.png"
    # When to collapse to hamburger menu
    # lg is default
    collapse-below: lg

Note

Mind the indentation which is required.

Tip

The size of the logo is set in the css as .navbar-logo

Navbar left

This sub-segment determines the links of the parts to be displayed right of the title (left of navbar).

This site’s Navbar left:

###Navbar left
    left:
      - text: "Overview"
        href: index.qmd
      - text: "Setup"
        href: setup/setup.qmd
      - text: "qmd"
        href: qmds/qmds.qmd
      - text: "css"
        href: css/css.qmd
      - text: "yml"
        href: yml/yml.qmd

Navbar right

This sub-segment determines the various author’s links (e.g. bluesky and linkedin to include). By default a toggle for dark/light mode () and a search button () are included.

My personal links:

###Navbar right
    right:
    # List of icons: https://icons.getbootstrap.com/
      - icon: cup
        href: https://ko-fi.com/waveofinspiration
        aria-label: Ko-fi
      - icon: bluesky
        href: https://bsky.app/profile/m-gemmell.bsky.social
        aria-label: BlueSky
      - icon: github
        href: https://github.com/m-gemmell/Quarto_guide
        aria-label: GitHub

NEOF links:

###Navbar right
    right:
    - icon: house-fill
      href: https://neof.org.uk/training/
      aria-label: NEOF website
    - icon: linkedin
      href: https://www.linkedin.com/in/training-neof/
      aria-label: LinkedIn
    - icon: bluesky
      href: https://bsky.app/profile/nerc-eof.bsky.social
      aria-label: bluesky

CGR links:

###Navbar right
    right:
    - icon: house-fill
      href: https://www.liverpool.ac.uk/genomic-research/
      aria-label: CGR website
    - icon: linkedin
      href: https://www.linkedin.com/showcase/liverpool-shared-research-facilities
      aria-label: LinkedIn