Click here to monitor SSC
SQLServerCentral is supported by Red Gate Software Ltd.
Log in  ::  Register  ::  Not logged in

Custom Navigation controls in SharePoint 2010

There are several ways to create a custom navigation control in SharePoint. In the below image you can see the left navigation is hidden. This is done with the use of a master page and some custom CSS. Now you want to create your own list of links to other pages and content that you control. Notice this page is not as wide as the default SharePoint site. If your client has smaller monitors throughout the company this may be necessary as in this case.


The first step is to create a new web part page with a left column available.

Click on Site Actions > Edit in Share point designer.


Click Web part Page on the top ribbon and select the desired web part layout. In this example we are selecting the one with a left column that spans the page.


Give the page a name and click ok.


After this the page will show up on the site pages.


Right click on the page and select properties. Copy the URL. Open your browser and paste in the URL you just copied. Then click Site Actions > Edit Page


On the left column click on add a web part. At the top you will have lots of choices for the type of web part.

This first option we will look at is the list. Select List and Libraries, and let’s say you want to show dashboards in your navigation control, Select Dashboards.


This will add the dashboard list to the web part as seen in the below image.


This is not a good layout due to the width and the unnecessary columns. You can change the look of the web part in the editor. In the top right there is a small black arrow that appears next to the check box. Click on this down arrow and select Edit Web Part.


In the top right you will see the Menu in the following image. Click on the link below the first drop down menu named Edit the Current View.


Here you can change the columns that are showing in this web part. In this menu uncheck all of the columns except the Name Column. Click ok and this will take you back to the page out of edit mode.


Now you can see the list of dash boards on the left. If you deploy any new dashboards they will automatically show on this page.

The next method to add a list of links is the manually way. This gives you more flexibility and lets you leave out some dashboards if you want to. But this is more time consuming and is a lot more work to maintain. However, this method does give you more tools to use.

You are going to add a web part to the left columns just as you did before in the Edit Page mode by clicking Add a Web Part in the left column. In the list at the top you will select Media and Content and then select Content Editor and click add. This gives you an HTML editor in the web part on the SharePoint site.


In the Content editor in the web part click the link Click here to add new content.


Now you can type directly in the content editor any text you would like. You want to add links to the web part so click on the insert tab at the top in the ribbon. Select Link and from SharePoint. This will give you a menu of all of the site content. In this case you want to add the dash board link so click on the dash board folder and select the dash board you want to show.


In the window that appears select the dashboard or page you want to show and click ok.


You will see the link in the content editor now.


There are still a couple of things you can do to clean this up. First we want to take the aspx off the link. To do this click on edit HTML source under the format text and HTML menu.


This brings up the HTML editor where you can alter the links. Delete the .aspx from the link. Make not to alter the href section of the HTML. Then click ok to return to the web part.


The next change you will make is to the name of the web part. The default name is content editor. To change this click on the small drop down menu on the web part and select Edit Web Part.


The web part editor will appear in the top right. Expand the Appearance section and change the name from content editor to Dashboards then click ok.


You have completed adding link columns to the web part page now. One way is using a list that automatically updates but you don’t have much control. The other you have complete control but you will have to manually update it when you add new pages.

Let me know if you have any questions.


Leave a comment on the original post [, opens in a new window]

Loading comments...