Blog Post

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.

clip_image001

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.

clip_image002

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.

clip_image003

Give the page a name and click ok.

clip_image004

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

clip_image005

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

clip_image006

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.

clip_image007

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

clip_image008

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.

clip_image009

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.

clip_image010

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.

clip_image011

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.

clip_image012

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

clip_image013

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.

clip_image014

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

clip_image015

You will see the link in the content editor now.

clip_image016

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.

clip_image017

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.

clip_image018

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.

clip_image019

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.

clip_image020

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.

Rate

You rated this post out of 5. Change rating

Share

Share

Rate

You rated this post out of 5. Change rating