Feature: Navigation

[JohnONolan]

The Navigation UI provides a simple user interface for creating a list of links to output in your theme. The interface allows for the clickable text and url for each link to be entered. Each item can be reordered using drag and drop, edited, removed and new items can be added to the end of the list. In the theme API, we get a new {{navigation}} helper, which works with a default navigation.hbs template, much the same as the {{pagination}} helper.

Sub Issues

• Create the new screen (issue New Navigation Menu Interface #4537)
• Handle the data as a setting (issue Manage the Navigation Menu Setting / Data #4539)
• Drag and drop reordering (issue Navigation menu drag & drop #4540)
• Base URL preview (issue Navigation URL default value (base URL preview) #4807)
• Helper / output (issue New Navigation Helper #4541)

Accessibility Questions

Should we wrap with <nav role="navigation"> ? IMO: Feels like clutter - I'd rather let the theme define the wrapping element.

Should we put the ARIA role into the UL? Like <ul class="nav" role="navigation"> to promote better accessibility standards by default? Is this a valid use of the role attribute?

[ErisDS]

@JohnONolan Two questions:

Should the default 'Home' item only be present in the UI by default (and stored after pressing save) or should it be stored by default and output by the {{navigation}} helper regardless of whether anyone touches this screen?

Should the navigation helper definitely always output absolute URLS? (Note: I moved that part of the spec to #4541)

[JohnONolan]

First question: the latter

Second question: yes (imo)

[craigbutcher]

@JohnONolan - Accessibility is a must. Check out ARIA roles cheatsheet for help and a few links on that page. Hope this will help!

[ooktay]

#4539 is already closed, but this will be harder to change later. So here is my 2c:
These navigation helpers will only be used by the theme developer, right? Then, the keys should be provided by the theme rather than hand coded by the blogger.
If we are thinking about some "universal" keys like "home", then these should be hard coded in ghost to enforce this universal-ness.

[ErisDS]

@ooktay I think you have misunderstood how this will work. Please have a read of #4541. The navigation items will be selected by the blogger, not by the theme developer.

[ooktay]

I got it now, the helper outputs a simple menu. Thanks @ErisDS.

[tidyui]

Hi there, just thought I'd share my view on post, pages & navigation structures from working with different content management systems for over ten years.

A lot of other platforms make the visual distinction between navigation and the actual content like you're proposing here. One downside with it is that it cripples the publishing flow somewhat since most of the time you're first "writing content", and the "attching it" to a structure. In other words you're transforming a simple task into a two-step process.

Also, for the person writing the content, the only point of separating the navigation structure from the pages is if it's possible to create several navigation structures and publish the same page in several of them at the same time.

A simpler way to present this to the user would maybe be to create a new view called Pages/Site/Whatever where the navigation structure is shown. Here users can create "pages" of different kinds, for example:

• Content page (post with page=1)
• Tag archive
• Internal link (i.e to another post)
• External link

When the user creates a new entry the new post is created together with the navigation item in a single transaction, making it seemless for the user and turning it into a single step. If this kind of view was created, then maybe it would also be logical to filter out posts with page=1 from the post list.

In other words, the same underlying structure could be used, it's just presented in a different way.

Btw, I really love the project!

Regards

[ErisDS]

Steps to ship it (:shipit:) -

• Get PRs merged: Use placeholder only for last item #4914, Update to PR 4852 ({{navigation}} helper) #4919, Ensure internal nav items have a trailing slash #4923
• Get bugs fixed: Navigation - invalid sort metadata when item saved without pressing +/enter #4927, Navigation - delete not behaving correctly after a re-order #4928, URLs used in embedded JavaScript within posts get parsed #4922, Navigation - Saving with last field filled (but not added) makes ordering jump #4944
• Get Casper updated (@PaulAdamDavis Add {{navigation}} support to Casper Casper#173)
• Decide on whether there should be default values or not (ref meeting 17th Feb) (YES)
• Remove the config flag
• Test the whole package
• 🚢

[ErisDS]

🚢 'd it 😁