Skip to Main Content
About TCC Libraries

Content Style Guide

Side Navigation

Side Navigation

Our LibGuides already have a horizontal navigation. at the top of the site. Web services want this navigation if we don't use the mega menus. Side navigation works better with keyboard navigation when using screen readers. Subpages also more discernable with side navigation.

 

 

Side navigation is usually easier for our users to understand and navigate without being overwhelmed. Here are links to information about studies exploring usability, eye tracking, and other studies indicating that students generally have an easier time seeing and using side navigation:

Responsive Design

LibGuides are made with responsive design. This makes it easier for users on phones, tablets, and other mobile devices to read and use them. However, this means that we need to pay attention to where we place content in guides as it will be rearranged to suit the screen size of the user.

When viewing a Side Navigation layout guide on small devices:

  • The navigation with be at the top.
  • The box(es) in the left column will be second.
  • The box(es) in column 1 will wrap around below the left column

When viewing a Tab layout guide on small devices:

  • The tabs (navigation) will be at the top.
  • The top box will be second (if used).
  • The box(es) in the left column will be third.
  • Additional columns will wrap around below the top box and left column in order from left-to-right.
  • The bottom box will always be last (if used).

Implications

  • When using Side-Nav layout, limit the box(es) you add underneath the navigation in the left column so readers will focus on the main content in your primary column.
  • When using Tab layout, place your most important content in the left column or top box since this is guaranteed to always be at the top of the guide.
  • Break up content so there is a natural flow when the columns are rearranged.
  • Group similar or themed content closer together in a column so they don't get separated.
  • Test your guide on multiple screens (or resize your browser window) before publishing.

TCC Chesapeake

Chesapeake Campus Library
(Pass Building, Room 209)
1428 Cedar Road
Chesapeake, VA 23322
Library Phone: 757-822-5162

Chesapeake Campus Tutoring
Tutoring Phone: Phone: 757-822-5157
More Tutoring Information


near_me Directions

TCC Norfolk

Norfolk Campus Library
Martin Building - First Floor
300 Granby Street,
Norfolk Virginia 23510
Library Phone: 757-822-1101

Norfolk Campus Tutoring
Tutoring Phone: 757-822-1134
More Tutoring Information


near_me Directions

TCC Portsmouth

Portsmouth Campus Library
Building A, Room A240 - Second Floor
120 Campus Drive
Portsmouth, VA 23701
Library Phone: 757-822-2130

Portsmouth Campus Tutoring
Tutoring Phone: Phone: 757-822-2349
More Tutoring Information


near_me Directions

TCC Virginia Beach

The Joint-Use Library  (JUL)
1700 College Crescent,
Virginia Beach, VA 23453
Library Phone: 757-822-7800

Virginia Beach Campus Tutoring
Tutoring Phone: Phone: 757-822-7736
More tutoring Information


near_me Directions

contact_support Submit a Question

Content created by TCC Libraries is licensed as CC BY 4.0CCBy

Last Updated: Aug 4, 2022 8:46 AM