openHASP/docs/07-navigation.md
fvanroie ade03960ff
Gpio improvements (#24)
* Return network status

* lvgl v8 preparations

* Fix pin assignment

* Improve idle checking

* Add bcklpin 32

* Update upload_port

* Comment on seperate line

* Update test.yaml

* Copy boot partitions

* Add release workflow

* Update README.md

* Small changes

* Add docs

* Delete 17-javascript.md

* Update docs

* Rename haspWakeUp to guiWakeUp

* Code cleanup

* Rename haspWakeUp to guiWakeUp

* Code cleanup

* Change to lvgl#dev-v8

* Update check_obj_type

* Enable default PULLUP

* Bump StreamUtils Version

* Increase JsonDocument size

* Improve GPIO Settings

* Comment default ports

* Add more GPIOs configs

* Gpio improvements

* Use saved_page in hasp_new_object

Co-authored-by: fvanroie
2020-12-13 00:26:02 +01:00

2.3 KiB

Customize site navigational links through a Jekyll data file.

Masthead

The masthead links use a "priority plus" design pattern. Meaning, show as many navigation items that will fit horizontally with a toggle to reveal the rest.

To define these links add titles and URLs under the main key in _data/navigation.yml:

main:
  - title: "Quick-Start Guide"
    url: /projects/hasp-lvgl/quick-start-guide/
  - title: "Posts"
    url: /year-archive/
  - title: "Categories"
    url: /categories/
  - title: "Tags"
    url: /tags/
  - title: "Pages"
    url: /page-archive/
  - title: "Collections"
    url: /collection-archive/
  - title: "External Link"
    url: https://google.com

Which will give you a responsive masthead similar to this:

![priority plus masthead animation]({{ "/assets/images/mm-priority-plus-masthead.gif" | relative_url }})

Optionally, you can add a description key per title in the main key. This description will show up like a tooltip, when the user hovers over the link on a desktop browser.

ProTip: Put the most important links first so they're always visible and not hidden behind the menu toggle. {: .notice--info}

Breadcrumbs (beta)

Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:

  1. Use a category based permalink structure e.g. permalink: /:categories/:title/
  2. Manually create pages for each category or use a plugin like jekyll-archives to auto-generate them. If these pages don't exist breadcrumb links to them will be broken.

![breadcrumb navigation example]({{ "/assets/images/mm-breadcrumbs-example.jpg" | relative_url }})

breadcrumbs: true  # disabled by default

Breadcrumb start link text and separator character can both be changed in _data/ui-text.yml.

breadcrumb_home_label : "Home"
breadcrumb_separator  : "/"

For breadcrumbs that resemble something like Start > Blog > My Awesome Post you'd apply these settings:

breadcrumb_home_label : "Start"
breadcrumb_separator  : ">"

Custom sidebar navigation menu

See the [sidebars documentation]({{ "/projects/hasp-lvgl/layouts/#custom-sidebar-navigation-menu" | relative_url }}) for information on setting up a custom navigation menu.