Menus and Architecture

Coherent and consistent information architecture is crucial to a good website. There are three elements to this consistent architecture that the user can see:

  • URLs
  • Navigation
  • Breadcrumbs

acf webpage with arrows indicating the URL breadcrumbs and left navigation

To keep these elements consistent, we have set up a single menu structure on the back end of the ACF website.

Only the Office of Communications (OC) has permission to add and remove pages to the menu , but being aware of this process will help OC work more easily with program offices.

Levels of Navigation

Navigation works like an outline, with multiple sub-levels. When talking about navigation on the ACF site, it’s helpful to be clear which level is being referenced. Our site supports up to four levels of page navigation.

  1. Top Nav: appear on the main navigation bar and at the top of the left navigation
  2. Second level pages: sub-pages to top nav, appear in the drop-down menus on the navigation bar and in left navigation.  Second level pages can expand or collapse - they default to being expanded.
  3. Third level pages: sub-pages to second level, only appear on left navigation. Third level pages also can expand or collapse, but for space default to being closed.
  4. Fourth level pages: sub-pages to third level,and last level supported by our site. Cannot have sub-pages, so no support for expand or collapse.

 

page on the ACF website with arrows inicating the top navigation on menu and left nav, secondary on the dropdown and left

How does it work?

Every page on the site needs to be accounted for in the menu — to have a “home” in the Information Architecture. 

As pages are created, OC will take two actions:

  1. Add the page to the overall site menu — this will drive the top and left navigation, as well as the breadcrumbs
  2. Make sure that the URL path reflects the breadcrumbs

An Example: The Office in Trafficking in Person wanted to add a new page, describing a new kind of scholarship for students offered by the National Human Trafficking Training and Technical Assistance center. That page would be added to the menu, which would cause the left navigation to read:

Training

            National Human Trafficking Training and Technical Assistance Center

                        Training & Technical Assistance

                        Professional Development Scholarships

                        Organizational Scholarships

                        Student Scholarships

And the breadcrumbs would read:

            ACF Home > Office of Trafficking in Persons > Training > NHTTAC > Student Scholarships

The URL would be adjusted to read:

            /otip/training/nhttac/student-scholarships

What do we need you to do?

As you consider new pages for your website, think about where they belong in your menus, and make sure you have a clear plan before approaching the Office of Communication to create or publish new pages.