The backbone of a church website is its navigation. A poor navigation obscures the content and loses visitors, but a well-designed navigation will streamline the user experience by giving what they need when they need it.

Here are the latest trends in good church website navigation and headers.

Logo: Horizontal orientation. On the Left. Links to Home.

Most websites place their logo in the top left corner. The center (with navigation on either side) is also a viable option, such as in the case of Terra Nova. Tips include:

• Link logo to home page: Even if you choose to have “Home” as a navigation element, the logo should still link to the home page. Users expect this functionality.
• If you have both horizontal and stacked versions of your logo, you will want to use the horizontal version in most cases because it uses up less vertical page real-estate, which allows room for more site content before users have to scroll.
• Stacked logos still can work if (1) you have a longer name (Celebration Church), (2) your navigation bar is higher than normal for another reason such as subtext (The Chapel), or (3) your logo is compact (City on a Hill).

Dropdowns: No Longer a Best Practice

Dropdowns are still popular, but user experience architects, designers, and SEO experts are increasingly discouraging their use. Reasons why include:

• Studies have found that many people find dropdowns annoying.
• By not having them you drive people to higher level pages first which give them a broader context before drilling down further.
• You can still have subpages, just display them on the section page instead of in the website’s global navigation.
• Dropdowns dilute rather than focus the “link juice” from the home page. If not coded properly, Google may struggle to understand them at all.
• Dropdowns tend to encourage the creation of too many pages (I’ve been guilty of this in the past). Not having them encourages clarity and brevity through combining of the most important information up front.

Creative alternatives to the dropdown menu include:

• Longer home page with the subnav included in each section (see Hillsong London). University of Colorado Denver (where I’m attending grad school) takes this a step further and adds a floating nav bar which jumps you up and down the page.
• Provide the user with the context of an entire page simply through hovering over the navigation. For an example, hover over the main navigation on Gateway Scottsdale’s website.

Secondary Navigation: Use to Cut Down on Main Sections

The secondary navigation is used as way to cut down on primary navigation sections by moving a few frequently sought after pages into a smaller secondary nav bar. Common examples are Give, Contact, Login, Search, Calendar/Events. Tips include:

• Use smaller text
• Try to limit to 3 (not including Search)
• Also a common place to find a locations dropdown or campuses button/link.

Social Icons: Move out of Header

Though a number of sites still displayed social icons in the headers, more and more of them seem to be moving them to the footer, a sidebar, or beneath the slider.

Navigation Subtext: Use Only When Truly Helpful

Subtext is an option, but it runs the risk of making things unnecessarily cluttered. Tips include:

• Only use it if additional context is truly needed.
• Avoid using if you have more than 5 sections.

GOOD USAGE: The subtext is helpful and allows for the condensing of sections without loss of understanding.

• JESUS It’s all about Jesus
• VISIT Locations : About
• CONNECT Groups : Ministries
• SERMONS Training : Music
• GIVE Donate : Serve

POOR USAGE: The subtext provides no real additional value and makes things unnecessarily busy.

• ABOUT Who we are
• CONNECT and get involved
• NEXT STEPS for your journey
• EVENTS to enjoy
• GIVING back to the Lord
• CONTACT Drop us a line

Church Website Navigation Examples

Fairhaven (Centerville, OH) – 4 sections

Gateway Scottsdale (Scottsdale, AZ) – 4 sections
Note: Great use of subtext with fewer navigation options. Upon hovering over navigation a page-wide dropdown with a contextual large image and list of subpages appears. Feels like visiting a new page without having to click on anything.

Grace Community Church (Simi Valley, CA) – 4 sections

Austin Stone Community Church (Austin, TX) – 5 sections
Note: Example of a “Show Campuses” link.

Brainerd Baptist Church (Chattanooga, TN) – 5 sections
Note: Though their sections built around vision/mission are creative, their meaning is less intuitive to the visitor.

City of Grace (Mesa, AZ) – 5 sections

Eagle Brook Church (Minneapolis, MN) – 5 sections
Note: The campus links in the upper left above main nav work well with this simple header. On a less simple header, you might want to use a single dropdown, link or button.

First Baptist Concord (Knoxville, TN) – 5 sections

Rock Church (San Diego, CA) – 5 sections
Note: Another great use of subtext.

The Chapel (Chicago, IL) – 5 sections

Celebration Church (Jacksonville, FL) – 6 sections

Central Christian Church (Mesa, AZ) – 6 sections

Christ’s Church of the Valley (Los Angeles, CA) – 6 sections

Christ Church of the Valley (Peoria, AZ) – 6 sections

Church of the Highlands (Birmingham, AL) – 6 sections

City on a Hill (Melbourne, Australia) – 6 sections

Elevation Church (Matthews, NC) – 6 sections

Glide (San Francisco, CA) – 6 sections

Highpoint Church (Memphis, TN) – 6 sections

Imago Dei Community (Portland, OR) – 6 sections

LifeChurch.tv (Oklahoma City, OK) – 6 sections

Potential Church (Fort Lauderdale, FL) – 6 sections

Terra Nova Church (Troy, NY) – 6 sections

Central (Las Vegas, NV) – 7 sections

Central Baptist Church (Jonesboro, AR) – 7 sections

Christ Fellowship (Miami, FL) – 7 sections

First Baptist Church (Woodstock, GA) – 7 sections

Glad Tidings Church (Omaha, NE) – 7 sections

Scottsdale Bible (Scottsdale, AZ) – 7 sections

The City Church (Seattle, WA) – 7 sections

For more church website inspiration, check out Church Relevance’s list of Great Church Websites.