Xamarin Forms Toolbar

The Xamarin Forms Toolbar is an abstraction of the extensions you can add to the NavigationBar on each platform. ToolbarItems are the individual items you add to the NavigationBar. The difficult part with this abstraction, is the need for it to be separate or included in the navigation bar. In this post, I will go through how to add and customize items in the toolbar, however I normally recommend to steer clear of this functionality, and create your own navigation bar from scratch, due to the limitations on customization.

Toolbar Items

First, lets have a look at how Toolbar Items look on each platform.


In Android, the toolbar items are added to the App Bar (a.k.a Action Bar).

Both Primary Items


One Primary, One Secondary




In iOS, the toolbar items are added to the NavigationBar.

Both Primary



One Primary, One Secondary



In UWP, the toolbar items are added to the Command Bar (App Bar prior to UWP).

Both Primary



One Primary, One Secondary

uwpdesktopsecondary uwpphonesecondary

Toolbar Item

Here is an example of how to add ToolbarItems in Xamarin Forms, to a ContentPage.

    <ToolbarItem Name="MenuItem1" Order="Primary" Icon="Microsoft.png" Text="Item 1" Priority="0" />
    <ToolbarItem Name="MenuItem2" Order="Primary" Icon="Xamarin.png" Text="Item 2" Priority="1" />

The ContentPage must be part of a NavigationPage and the NavigationBar must not have been disabled. If your ContentPage isn’t inside a NavigationPage, or you disabled your NavigationBar, then the ToolbarItems will not be displayed.

Layout Options

There are a number of options that allow you to change certain visual aspects and location of each ToolbarItem.


You can specify icons to be displayed. UWP expects an icon and will leave a space there if none is specified. An interesting thing to note, is that icons will always be turned white or black in UWP, depending upon the theme of the app, and shrunk to size. In iOS they will be turned to the default theme color, and not shrunk. You can not have a color icon, in UWP or iOS. In Android, the icon is shown in full color. Note that I used the full color png for the icon image and it was automatically converted via the platform.






uwpdesktop uwpphone


Text is simple. Add text to the Text property and it will be displayed. If you type in a really long piece of text, interestingly, this toolbar is quite high on the priority of what gets displayed.

In UWP, it expands vertically, in both the desktop and phone version.


In Android, it expands horizontally, even taking priority on the title.


In iOS, the same again, as it expands horizontally, taking the top priority.



Ordering the icons, or text, is simply done by adding an integer from 0 to X, in order of left to right. You do this with the Priority Property, not the Ordering property.

Secondary Toolbar

The secondary toolbar, as you can see in the screenshots above, is either a drop down menu, with more menu options, or a secondary bar, underneath the primary. Depending upon where you want to place it, use the Order property and set to Primary or Secondary.

<ToolbarItem Name="MenuItem2" Order="Secondary" Icon="Xamarin.png" Text="Item 2" Priority="1" />

Note: Toolbar Items are not, by default, updatable, after they have been added to the toolbar , however there are ways around this.

On Click

If you want to perform an action when a toolbar item is clicked, you have the option of an event, or a command. Using an event, you simply use the Activated event.


Using a command, you bind to an ICommand, similar to many other controls.

Command="{Binding ToolbarItemCommand}" CommandParameter="1"


  1. Stacy

    I cannot get my toolbar items to display in windows UWP. It displays properly in iOS and Windows Phone 8.1 but it will not display in Windows UWP? At least not in my Visual Studio simulator. What do I need to do to make it display?

    I have made sure that it is wrapped in a NavigationPage. I have made sure that the SetHasNavigationBar is true. Nothing works in UWP.

    Can you help point me in the right direction? I’ve been working on this for months and my deadline is coming up very quickly. Every article/forum/example I have found on the web has explained how to add the toolbar items (relatively all the same code) and I have tried every one that I have found — no luck! It just won’t display on the UWP simulator?

    I am also on the latest version of Xamarin.Forms as of 2/20/17 and I am using a PCL project.

    1. Graeme

      @Stacy I just had the same problem however it seems that if a Title is not set for the page then the nav bar is not shown. Try setting the Title in you content page constructor.

  2. mpalamos

    HI, I am new to xamarin forms and i want to ask you, how can i add the following code to App.xaml(Application.Resources) to have it on every content page.

    Will this work for both IOS , Android?

  3. mpalamos

    (Sry fro previous comment) .. I am new to xamarin forms and i want to ask you, how can i add the following code to App.xaml(Application.Resources) to have it on every content page.


    ToolbarItem Order=”Primary” Priority=”1″
    ToolbarItem Order=”Secondary” Text=”change pass” Priority=”2″
    ToolbarItem Order=”Secondary” Text=”Έξοδος” Priority=”3″

    Will this work for both IOS , Android?

    1. Adam Pedley

      Create a new ContentPage, and we can call it BasePage.

      In that BasePage, put the Toolbar.

      Then in every other page, inherit from BasePage.


      public class MainPage: BasePage {}

      and in XAML, change it to include the below, instead of ContentPage.

      <local:BasePage xmlns:local=”clr-namespace:MobileApp.NamespaceTheBasePageIsIn” >

  4. Rafael

    Hi, it is possible that the secondary toolbar on iOS have the same look like android ?

    1. Adam Pedley

      Unfortunately no. You would need to create your own Header/Toolbar from scratch to implement that. However this would be trying to make an iOS app like an Android app, which is usually not a recommended approach. Try to play to each platforms strengths, without making them look identical.

  5. Raja Babu

    How to get the toolbar across all the pages/views?
    Can I use Prism/MVVM for the same, I can’t get the ICommand working with this?

  6. Kire

    Hi Adam, is there a way to show only text without Icon on ToolbarItems by default without expanding?

  7. hatim

    how do I add the toolbar items in a master detail view , I tried the code above but it doesn’t work.

    1. Adam Pedley

      A toolbar is only able to be put into a NavigationPage. Hence, you need to put a NavigationPage into the Detail of your MasterDetailPage to get it to work.

  8. Gilles jr Bisson

    You mentionned there are ways to have dynamic toolbar items. Can you explain how ? Thanks !

    1. Adam Pedley

      You will need to create your own CustomToolbarItem that inherits off a ToolbarItem. In here you may create BIndableProperties, that on update can change elements within the toolbar item.

  9. Billy Martin

    Even though I am able to change the color of my Tool Bar, both my Tab Bars and My Toolbar Drop Down Menu are gray and I can’t find a way to change them in Xamarin Forms PCL.

    Do you have a suggestion?

    1. Adam Pedley

      Which platform are you referring to here? You will probably need to research the native solution to the problem, and implement it in a custom renderer, or native platform setting somewhere.

  10. Billy Martin

    So, the tab color can’t be done in the portable project? Thanks. One more question, please. How do I make a listview dropdown after clicking the secondary Icon? I have no problem adding items to the menu, but can’t figure out how to use a listview.