Options and tips to customize the Office365 navigation links

The new Office 365 and SharePoint 2013 introduced a suite bar at the top of the screen and you might need to customize it by adding some links. This particular useful if you want to users to browse back to SharePoint on-premises in hybrid implementation. In this blog, I would provide three different options and the pros and cons for the implementation. You could decide the option that best fit for your company.

Although Office 365 navigation bar will not allow the customization that can be easily done on SharePoint on-premises by adding custom user actions. I’m able to find the following three different ways to “modify” O365 navigation links. Here are the summary of the implementation.

1. Add a logo with link to top left navigation bar from Office 365 Admin Dashboard
2. Add the links to Office 365 site global navigation bar through Powershell and CSOM
3. Add links to top Office 365 navigation bar by applying the custom master page

The three implementations are displayed in the following screenshot. 

All of them have different pros and cons. I’ll explain the procedure how to implement them and the tips.

Option 1 - Add a logo with link to top left navigation bar from Office 365 Admin Dashboard. You could follow the following procedure to add the logo with the link.

• Login to your Office 365 Admin Dashboard (https://portal.office.com/admin)
• Click the your company name link on the right side
• From the property page choose a logo, pick your URL for where you would want the Logo to link to; accent colors, text and link colors and other Office 365 logo colors

Pros:

• No code implementation and easy to configure
• Global to all O365 application

Cons:

• Not use friendly and obvious to end users
• May break when O365 upgrade 
• Only O365 global admin could do this

Option 2 - Add the links to Office 365 site global navigation bar through Powershell and CSOM. You could use the following Powershell script snip and CSOM to add links to SharePoint online site navigation.

 #Credentials to connect to office 365 site collection url
$username="harryc@myqualcomm.onmicrosoft.com"
$password="password"

#Load CSOM libraries
Set-Location $PSScriptRoot
Add-Type -Path (Resolve-Path "Microsoft.SharePoint.Client.dll")
Add-Type -Path (Resolve-Path "Microsoft.SharePoint.Client.Runtime.dll")

#Load O365 site
$siteURL = "https://myqualcomm-my.sharepoint.com"
$credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
$Context = New-Object Microsoft.SharePoint.Client.ClientContext($siteURL)
$Context.Credentials = $credentials
$context.RequestTimeOut = 5000 * 60 * 10;
$web = $context.Web
$site = $context.Site
$context.Load($web)
$context.Load($site)
$context.ExecuteQuery()

#Add SharePoint on-premises link
$OnPremisesURL = "http://on-premises-shrepoint.com"
$OnPremisesTitle = "QC SahrePoint"

$Nodes = $Context.Web.Navigation.TopNavigationBar
$NavigationNode = New-Object Microsoft.SharePoint.Client.NavigationNodeCreationInformation
$NavigationNode.Title = $OnPremisesTitle
$NavigationNode.Url = $OnPremisesURL
$NavigationNode.AsLastNode = $true  
$Context.Load($Nodes.Add($NavigationNode))
$Context.ExecuteQuery()

Pros:

• Easy to implement
• User can modify and manage themselves from UI
• This can be done through UI by site collection admin also

Cons:

• Not global to all O365 application but the SharePoint site
• You need to run this against all site collections

Option 3 - Add links to top Office 365 navigation bar by applying the custom master page. You could modify the master page by adding the following lines of code just before the line OoB navigation bar. We use seattle.master default master as example. You could add just befor the following line.

<SharePoint:AjaxDelta runat="server" id="suiteBarDelta" BlockElement="true" CssClass="ms-dialogHidden ms-fullWidth noindex">

This is the new link we will add. You could use click F12 and then locate the navigation bar in the master page code by clicking the bar.

 

<div class="dd"><style>

.dd {
    color: white;
    color: white;
    display: block;
    font-size: 13px;
    left: 250px;
    margin-left: 100px;
    position: absolute;
    top: 16px;
    z-index: 999;
}
a.ddLink, a.ddLink:visited
{
    color: white !important;
}

</style><a class="ddLink" href="http://www.google.com"><Label>TestingURL</Label></a></div>

Pros:

• User friendly
• Can be done by site collection administrator

 Cons: 

• Only global to the sub-site level and you need to apply to all web inside all site collections
• When new site created, you need to find a way to apply this master page
• You need to enable both publishing features on site collection and web before you can change master page
• Future O365 master page change will not be pick up until you apply the change to custom master page

Based these the complexity of the options, pros, and cons, you could find the best fit for your implementation.

In order for you to understand the impact of the O365 changes to the above three different ways to “modify” O365 navigation links, I pushed the latest O365 changes that should be as of Dec. 12 2014 to my O365 that is updated two week ago. The option #2 master page will be overwritten by the new update. Option #1 changed the company icon to the middle. The option #3 I'm not sure why the links are duplicated. It might not be caused by the O365 update. The three options after the O365 update is shown in the following screenshot. 

Now, it seems to me that option 1 should be the best option with lest effort and less impact by the O365 updates.