Menus and Interaction

Navigation in a blog theme does two things. On desktop, it gives returning readers quick access to the sections they know. On mobile, it needs to collapse cleanly and open reliably when needed. Blaskan handles both without complexity. This article covers menu setup, mobile behavior, keyboard access, and what to expect from interaction states.

For the DOM specification underlying some of these behaviors, see the navigation reference on MDN.

Primary Menu Location

Blaskan registers one primary menu location. It appears in the site header to the right of the site name or logo.

To assign a menu:

1. Go to Appearance > Menus
2. Create a menu if one does not exist
3. Add your pages, custom links, or post categories
4. Under Menu Settings, check the Primary Menu location
5. Save

Once assigned, the menu items appear in the header. They are ordered in the same sequence they appear in the menu editor.

Menu Depth and Structure

Blaskan's header menu works cleanly with flat, one-level navigation. A set of six to eight top-level items is the typical practical range.

Dropdown submenus are supported. To create a submenu, add items to the menu editor and drag them slightly to the right of their parent item. WordPress shows the hierarchy indented in the menu editor. On the front end, hovering or focusing the parent item reveals the dropdown.

Some considerations with submenus:

Touch screens. Dropdown menus that activate only on hover are inaccessible on touch-based devices. Blaskan activates submenus on focus and on tap, so touch users can access them, but deeply nested structures are still awkward to navigate on a phone screen.

Cognitive load. A menu with many items and multiple levels takes longer to scan than a flat menu with fewer choices. Most reading-focused blogs function better with a flat structure. If you have a large site with many sections, consider whether a site-wide search and internal page linking handles navigation better than a complex menu.

Mobile menu capacity. When the menu collapses on mobile, all items stack vertically. Very long menus can result in a mobile navigation that requires scrolling to reach the bottom. Keep the item count manageable.

Mobile Navigation

Below the responsive breakpoint at 960px, the header navigation collapses and a hamburger toggle button appears in the header.

Clicking or tapping the toggle button opens the mobile navigation as a vertical dropdown below the header. Clicking or tapping the toggle again closes it. Clicking anywhere outside the open navigation also closes it.

The toggle button has an accessible label. Screen reader users hear the button described as a menu control with its current expanded or collapsed state.

If you observe the mobile menu not opening, the most common cause is a JavaScript conflict from another plugin. Open the browser developer console (F12, Console tab) while on the site and check for JavaScript error messages. See the support documentation for the plugin isolation steps.

Keyboard Access

Every menu item is reachable by keyboard. Tab moves focus forward through the menu. Shift+Tab moves backward. Enter and Space activate links and toggle button states. Arrow keys navigate submenu items once a parent is focused.

The focus indicator on menu items is visible: a distinct outline or color change appears on each focused element. This indicator is intentionally visible and meets contrast requirements. Removing it with CSS (:focus { outline: none }) breaks keyboard accessibility.

Interaction States

Menu links have three visual states:

• Default: Subdued text color, no decoration
• Hover: Text color shifts to the moss accent, light background tint
• Active (current page): The link for the currently active page or section shows the moss color and slightly heavier weight

These states give keyboard and mouse users consistent feedback about their position in the navigation.

The Skip Link

Before the header in the page source, Blaskan includes a skip link. This is a visually hidden link that becomes visible when focused. Keyboard users pressing Tab on any page will encounter it first. Activating it jumps focus directly to the main content area.

Screen reader users also benefit from this. It allows users who rely on assistive technology to bypass the header navigation and get directly to the content.

Do not remove the skip link or hide it in a way that prevents it from receiving focus. It is a functional accessibility feature.

Footer Navigation

The footer uses hardcoded internal links rather than a WordPress menu location. This is intentional: footer link sets on this type of site rarely change, and a fixed footer does not require the overhead of a registered menu location.

If you need to modify the footer links in a child theme, override the footer.php template part.

Custom Menu Areas

If your site requires a secondary navigation location (a footer menu, a sidebar menu, or a contextual per-section menu), add it to a child theme. Register the new location in functions.php with register_nav_menus(), then add the wp_nav_menu() call to the appropriate template file.

A child theme is the right place for this rather than editing theme files directly. See child theme basics for the setup.