Getting Started

Automated navigation index within a page. Local Nav builds an in-page navigation index with smooth scrolling navigation and back to top options.

Think of Local Nav as being like an Autonav block that provides navigation within a long page. For most applications a Local Nav block will be added to the top of the Main area or in a Sidebar.

We have two Local Nav blocks on this page:

1. Immediately below we have an index to the page On this Page
2. The sidebar to the right is extended with in-page navigation

Both blocks use templates provided with the Local Nav block.

Navigation

The Navigation section determines how items are selected for inclusion in the Local Nav index.

Elements to Include

For a Local Nav in a Main area or a Left Sidebar, you probably want to select only items After this block. If your Local Nav is in a Right Sidebar, Before this block will usually be a better choice.

Level Selectors

We then need to decide how to populate each navigation level. Unless a page is rigorously structured, such as a legal document, you are unlikely to require 6 levels dedicated to each of h1..h6. Most web pages are not rigorously structured by heading levels. After h1, many web pages use h2..h6 for design choices rather than for logical structure.

For the navigation on this page we have limited our navigation levels to just 2 levels (0, 1) mapped directly to h2 and h3 respectively.

It doesn't need to be that way. You are free to map any heading, list of headings or other CSS selector to any nav level. They don't even need to be the right way up!

The Selector section uses CSS selectors, so you can pick each level of Local Nav however you like with a selector or a comma separated list of selectors.

For example, in the sidebar Local Nav on this page we have a single selector for level 0 with "h2,h3".

Rather than just creating a navigation in page order, you can also use Local Nav to build an alphabetical index by choosing an alternate Sort option.

Theme Constraints

The Outer Scope is a CSS selector to look within when generating the local navigation list. The scope is already restricted to .ccm-page so you do not need to specify .ccm-page. For tighter scope further selection may be specified. Listed selectors should be separated by commas.

You can also Exclude elements of a page using a CSS selector to exclude when generating the local navigation list. For Atomik, Elemental or similar themes, it will usually be as a minimum .ccm-block-top-navigation-bar, footer, header to exclude the header and footer.

Within a page you can also assign any of the classes local_nav_exclude, local-nav-exclude to exclude an element and its children.

For navigation in this page we have also excluded the sidebar.

Back to Top

The Back to Top tab configures the converse of Navigation. You can add a back to top icon linking to the top of the page, to return to the Local Nav block, or to scroll to a CSS selector.

That link can be positioned across the bottom of the page, or appended inline, after each linked heading.

When #hash history is enabled in the Advanced tab, you can optionally specify the #hash to use for the back to top link. If you don't, Local Nav will create a suitable #hash for you.

For the two Local Nav blocks on this page, the Local Nav at the top of this Main area is configured for inline links back to the Local Nav block. You can see it as an up chevron after each heading.

The Local Nav in the Sidebar area is configured for a link bottom right to link back to the top of the page.

You can even use a Local Nav block to simply provide a back to top link without any actual navigation!

Advanced

The Advanced tab provides options to:

Preserve #hash history

When checked, the #hash history is preserved in the browser URL, so clicking Local Nav links within a page will be remembered for the browser back and forward buttons.

Mark active

In the Local Nav index, the currently active item will be marked with the class active. (Other classes can be specified by the block template).

Rebuild after change

You should only select Rebuild after change if you expect in-page JavaScript to add further content to the page, such as AJAX loaded content, and you need the Local Nav to adapt to cover the new content.

This option attaches one or more mutation observers to rebuild the Local Nav index after any change to page content. 

For Developers

For template developers, we have a debug option which outlines elements used by Local Nav and dumps copious trace information to the browser developer console, and an option to provide own JavaScript. As this page is about Getting Started, we won't go into further detail here.

Support

Our final tab provides support information, including links to this page, the Local Nav marketplace page and the marketplace Get Help link.

Other Considerations

Block Templates

Local Nav comes with a range of block templates to cover most uses and get you started for further uses and theme specific adaptations.

On this page, we have used the Columns 3 template and the Simple Sidebar template.

Multiple Blocks

As demonstrated by this page, you can use multiple Local Nav blocks on a page and they can use different block templates. 

If you do so, take care to with the Advanced options. For example, multiple Local Nav blocks with Rebuild after change enabled can result in runaway updates as the blocks play ping-pong with each other. You may not notice this on your page, but behind the scenes runaway JavaScript could be consuming browser resources. Rebuild after change is throttled to help such a mistake from being un-killable!

More Examples

You have already seen Local Nav used to navigate within this page and associated Local Nav support pages. There are other examples of Local Nav in use throughout this site. After all, that is one of the reasons why Local Nav was created!

Have a look at Omni Gallery - Simple Examples of Display Widgets.