928-523-1741
marketing@nau.eduLeft navigation block
When to use this block
The left-nav is a combination of three different nau custom blocks: The Left-Nav top bound, Left-Nav section block, and the Left-Nav bottom bound.
The “Left-nav section” block (also called “Indented right-side content” block) is the container that informs the code editor what information needs to be right of the floating left navigation bar. When implemented into a page, in combination with a Left-Nav Top Bound block and a Left-Nav Bottom Bound block, it distinguishes the page type to either be an Informational page / Left navigation page or a Hybrid / Full-width with left navigation page.
For info/internal pages, all content will be built inside of the Left-Nav Section Block. For Hybrid pages, the content will live both inside and outside of the left-nav section block.
Learn how to discern which NAU page type you need to create based on the content and page hierarchy.
Examples
You are currently viewing an Informational page / Left navigation page. If you’ve explored much of the rest of this NAU25 Training site, you’ll notice that most of the pages on this website are laid out to adhere to the Informational page standard formatting.
Having a descriptive and user-friendly left-side navigation is an essential component of the NAU21 theme. The left-nav helps site visitors understand the information that will be found on the webpage, and also streamlines their search in jumping to information that is most relevant to them.
Take notice of the left navigation bar on this page. Feel free to click the different topics listed under “On this page” to understand the usefulness of this navigation tool.
Video Tutorial
Self-guided tutorial
Setting up your block
The left navigation section is created using three blocks: the Left Nav Top Bound block, the Left Nav Section block, and the Left Nav Bottom Bound block.
Let’s add all three onto our page first, then we can discuss the purpose and functionality of each.
To add the blocks to the page, click the small, black box with a plus sign. A pop-up box will appear with a preview of 6 commonly used WordPress block options. Search for ‘left nav’ in the search box. The Left Nav Top Bound, Left Nav Section block, and Left Nav Bottom Bound should all appear. We’ll add them to our page in that order.
Now that they are on our page, let’s dive into each block.
Left Nav Top Bound
The left nav top bound block is the main block for creating a left nav on your page. This block is where you will set your page’s jump links and contact information.
In reviewing the block, you will notice various settings you can adjust. The most significant of these is the choice to have automatic or manual headings on the left navigation section, which are both advantageous in certain instances.
The automatic setting will automatically add all H2s found in your page to the left navigation section, allowing viewers to select them and jump to that portion of the page.
The manual setting allows you to provide your own left nav copy and anchor links for jumping to content on the page. This is useful for longer H2s that may take 2-3 lines of spacing within your left navigation.
If you’re using the manual option, you must create a link anchor that connects your left nav to the content block on your page. The anchor tells the page where to scroll if someone wants to jump to a specific topic or content.
You will set the anchor in the Left Nav Top Bound as well as the block associated with it. Be sure to use the exact word in both places, as the anchor link is capitalization and space sensitive.
Keep it toggled to automatic. We will demonstrate an example of both the automatic and manual left navigation linking in a moment.
The last thing to customize in this block is the contact information. To display the contact information, you can toggle the on or off button. For user experience, we recommend keeping it toggled on.
You also have the option of choosing to customize the phone number and email contact information or not. If the setting is toggled to “No” it will display the universities admissions phone number and email. When toggled on to “Yes,” you will be prompted to fill in a phone number and email address.
The last toggle option is for “Displaying Request Info.” A toggle to “Yes” displays a blue button at the bottom of the left nav, where the user can click to go to a general information page and fill out a request form. This link cannot be changed.
Keep this toggled on to yes.
Left Nav Section Block
After the Top Bound is completed, the next step is to insert the Left Nav Section block. The purpose of this block is to tell the page that you want all of your content to live to the right side of the left-navigation. It is basically the container for all of your page’s content. Without this block, the left navigation would overlap the content and make it difficult for users to read it.
Inside this block is where all of your content, other than the H1, will be built on your page.
For this example, let’s add some content blocks inside of the Left Nav Section block, and I’ll show you how the content displays and connects to the Left nav in a moment.
Add a ‘heading’ by clicking the small box with a plus sign.
Set your heading block to be an H2. Type “Monday”. Add a paragraph text block and type “First day of a traditional work week.”.
Add another H2 block and type “Tuesday”. Add a paragraph text block and type “The second day of the work week.”
Add another H2 block and type “Wednesday”. Add a paragraph text block and type “The middle of the work week.”
Add another H2 block and type “Thursday”. Add a paragraph text block and type “It’s almost Friday.”
Add another H2 block and type “Friday”. Add a paragraph text block and type “The last day of a traditional work week.”
Then Add another H2 for Saturday and Sunday. Add a Simple Color/Text/Photo block. Fill in the Headline to say “Weekend” and the text to say “Saturday and Sunday is the weekend in a traditional work week.”
Left Nav Bottom Bound
The last step in completing the left navigation setup is to insert the Left Nav Bottom Bound block. This should always be the very last block on your page editor.
This block acts as a guide for the left nav, telling it where to stop on the page. The left nav should follow the user’s journey as they scroll down the page. No additional work needs to be done for this block. Just simply insert this block at the bottom of your page, and it will be complete.
Preview your work
Select “Save Draft” at the top right of the editor to save your work. Hit the preview button at the top right of the editor.
You can see in the preview that the days of the week populate here in the left-nav – showing an example of how the H2’s automatically display within the left navigation.
Link type: Manual
Return back to the editor and scroll to the Automatic vs Manual section within the Left-Nav Top Bound block.
When you select the Manual radio button a new section will appear called Manual Links. This is where you will add your Left Navigation copy and set your anchor links.
Adding link anchors
To begin, click the “Add menu item” blue button for each text link you wish to add.
- In the Link Text add “Monday” in the link anchor type “monday”.
- Click Add menu item. In the Link Text add “Tuesday” in the link anchor type “tuesday”.
- And so on to Friday. For Saturday and Sunday, please add “Weekend” in the link text and in the link anchor type “weekend”.
Now that the Anchor links are set inside the Left-nav top bound, let’s connect them to the content on the page.
Setting anchors (HTMLs) in your content
We will start with our first H1, Monday. Click on the Heading Block. In the right-side setting click to edit the ‘Block’ settings. Under the “Advanced” dropdown, type in your anchor for Monday: “monday”
Remember to type the anchor text to match exactly what you used for the anchor text in the left-nav block.
If you do not see the right-side settings, click the gear icon on the top right of your page to activate it.
We will follow these same instructions for Monday-Friday.
The steps are a little different for Saturday and Sunday, since that information is in a NAU custom block.
For this anchor link, instead of adding it to the right-side settings, it will be tied to the block itself. You’ll find a fillable HTML anchor section on all NAU custom blocks. We will talk about these custom blocks in future videos. For now, let’s set our anchor link here at the bottom of our Weekend block. Type “weekend” into the HTML anchor.
We will want to save our work. Click “Save to draft”
Preview your work
Hit preview and view in Desktop view.
We can see that the page looks the same as it did before. Let’s test our anchor links to make sure they all worked.
Click a couple of the left nav options and jump around the page.
Now that we have checked our work, let’s submit our changes to the OASIS workflow.
