CS Tidbit #28: Creating Nested Navigation Bar Items

In my previous CS Tidbit, I outlined how to add an archive page to your blogs to free up some sidebar real estate while still giving readers access to our post history. Of course, now that we have this in place, how do we let our readers know where it is? In the past, adding links to one of the standard sidebar widgets meant manually adding entries to various skin files, and doing it in each theme on our site. There was also really no way to control security on the links either without adding some more customizations, ie if you had a link that you only wanted displayed to logged in users, or to owners of a particular section (Sharepoint calls this Security Trimming, I'm not sure what CS refers to it as).

Fortunately for us, CS now supports creating nested navigation bar items via the control panel, and also allows us to specify security attributes to control what audience gets to see these links. In this tidbit, I'll outline how to accomplish this. Our end result is going to look something like this:


This is just the standard navigation bar that you'd see in CS2008.5's Hawaii theme, along with 4 nested navigation bar items. To create these items, navigate to Control Panel and select Site Administration, and then head over to Site Theme. The url to this page will look something like http://<yourSite.com>/ControlPanel/Settings/ThemeConfiguration.aspx. In the theme configuration editor, select the Header tab and look for the section called Navigation Bar. You'll see a box similar to the one pictured here:


In this example, we'll add a link to the archive page we created in the previous CS Tidbit. Click the Add button, and then fill in information similar to the following:


Once you're done putting in the correct info, click save. You can then click and drag the newly created link to the section where you'd like it to be nested under. It's actually a pretty slick control. Once you have it where you want, click the save button in the lower right hand corner and navigate back to your site. The newly created nested navigation item should be displayed under the section you placed it in. All of this adds some nice navigational touches for your site visitors to be able to find stuff in an easier more consistent manner.


# Johan said:

How do you set the color of the nested navigation bar? I haven't been able to figure it out... =/

Thursday, October 2, 2008 9:41 AM
# Jayson Knight said:

It doesn't look like Telligent added an option to change this directly in the theme configuration page in the CP. You'll have to add a custom CSS style; the element you'll need to add a selector for is #CommonNavigation2

Thursday, October 2, 2008 3:52 PM
# Ho Sy Hung said:

Hi Knight,

I add link at SiteUrl.config

<link name="labs" resourceUrl="labshome" resourceName="labs" roles="Everyone" applicationType = "Weblog" />

but it doesn't display in Navigation Bar? Can you suggest me?

If I using Control Panel to add, CSS will confilc, it's black at Navigation Bar, help me

Monday, November 10, 2008 3:20 AM