Welcome to the demo!

 

In case you came here by accident, Sidekick is a responsive, super-customizable side/secondary navigation section for the PageLines Framework.

Sidekick sets itself apart from the rest with it’s robust options for styling as well as it’s functionality & behavior.  Explore these tabs to learn more, follow the links to see the different demos.

Aside from it’s dazzling good looks, Sidekick offers different ways to display it’s menus with an emphasis on using space efficiently and keeping things relevant.  Read on to learn more!

Featuring 2 modes of display, 3 behaviors for handling menu items, and the ability to override on individual pages, you’ll be in total control.

 

Let’s Talk Modes

The mode determines the source of the menu items. Sidekick has 2 modes: Page Hierarchy, and WP Menu.

Page Hierarchy Mode

When enabled, Sidekick dynamically populates it’s menu items from pages that are hierarchally related to the current page. In other words, if the current page either has children pages, or is a child page itself, the menu will be filled with pages that are related to the same top-level parent page.

This is the default mode.

WP Menu Mode

This mode is just what you’d expect. Sidekick can display any WordPress Menu you have created under Appearance > Menus, which can be set globally for the section as well as using per-page control.

Behaviors

Sidekick offers 3 different ways to display your menu items, these are referred to as behaviors.  All behaviors apply to both modes.

  • Classic default — in this mode, hierarchal levels of navigation are only expanded to the current page/menu item level and it’s immediate children. Sub-levels of sibling menu items are not displayed.
    This keeps things efficient and concise visually, by not using up more space than is necessary while still showing the most relevant menu items. This is particularly useful for pages/menus with deep levels of hierarchy/navigation.
  • Expandable — similar to Classic mode in it’s initial display, with the added ability to expand or collapse any level if items.
    Useful for navigating directly to a sub-page of a sibling page/menu item.
  • Full — renders all page/menu items without limit.

Like it’s big brother, Sidekick Offers Lots of Styling Control.

 

Inspired by the flagship primary navigation section Hero Nav, Sidekick offers the same level of styling control.

sidekick_colors

Choose your own:

  • Base (background) color & opacity
  • Base Text color
  • Corner control (border-radius)
  • Shadow on/off
  • Font
  • Contrast colors for menu item states (hover, current, ancestor)

sidekick_states

For those using Hero Nav, Sidekick offers optional 1-click integration for “synchronized styling”.  Such integration will inherit the styling you have defined for Hero Nav to make consistent styling between both navigations well.. faster than a speeding bullet? Any change in Hero Nav is instantly applied to Sidekick as well.

sidekick_inherit_option

Every Pixel Counts

 

On handheld devices, although they are becoming much larger these days, every bit of screen space becomes significantly more important simply because there’s less of it!

Sidekick’s 2 behaviors Classic & Expandable make it an ideal solution for sub-navigation on mobile due to their intelligent display behavior.  Only levels of navigation hierarchy are expanded that are directly related to the current page/menu item.  This means less wasted space!

Position

As a secondary navigation section, Sidekick is designed to be placed in the sidebar wrap or sidebar 1/2 template areas.  On responsive setups in a mobile viewport size, these areas move below the main content template area and become full-width.

Other than lookin’ good and doin what it should, Sidekick doesn’t have any special tricks for mobile display.   If you have any feedback or feature requests that you feel would be an awesome addition, please don’t hesitate to contact me!

In my opinion, I think providing secondary navigation below the main content like this in a responsive view is helpful and intuitive in the user’s experience.  Once one reaches the bottom of the content, the navigation (if any) is there to lead the user on to the next step, next page, etc.