> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/guides/creating-a-navigation-bar.md).

# Creating a Navigation Bar

### Creating Layout for our Navigation Element

Starting on our Home Page we'll first need to drag out a stacked layout in to our editor. In the properties panel

1. Set orientation to Horizontal (This is the direction we want our elements to layout)
2. set padding to 20px in all directions (To give some space around our navigation elements)
3. Set a height to 75px ( This is how tall we want our navigation bar)
4. Set Background color to white

<figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FJIMlJwXRl4jq0t5LM6wU%2FScreen%20Recording%202023-04-19%20at%2012.04.53%20PM.gif?alt=media&amp;token=f5544a63-7007-49e2-b0bb-0f3165f5f914" alt=""><figcaption></figcaption></figure>

### Add Logo to Navigation bar

Next lets drag in an Image module inside the stacked layout. Make sure the properties button is selected in Properties Panel.

<figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F4XHO8fqhDrZGBSQGvnXQ%2FScreenshot%202023-04-19%20at%2012.54.29%20PM.png?alt=media&amp;token=1f3148fa-f5e7-46ce-8cd1-b4930872db72" alt=""><figcaption></figcaption></figure>

In the Properties Panel, Select an image/logo asset that you have uploaded to the asset manager.

<figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F8YMsyVsRurjDp6tCDbEt%2FScreen%20Recording%202023-04-19%20at%201.01.55%20PM.gif?alt=media&amp;token=46f9d18d-1b4c-4207-ae8a-16b005b5356f" alt=""><figcaption></figcaption></figure>

Next in the Object Fit field set to \`contain\` so that the image doesn't go past the navigation bar and give it a max height of 100%.

![](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F4IMkm29HnSkgSKJghCCk%2FScreenshot%202023-04-19%20at%201.09.40%20PM.png?alt=media\&token=608cf0b1-bfb0-4156-aafa-4a53b237ca25)                                        <img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FF8fqvTftpHeVbnBsf3cR%2FScreenshot%202023-04-19%20at%201.10.03%20PM.png?alt=media&amp;token=d62150f0-bd57-4e28-a783-20023efa3efe" alt="" data-size="original">

### Creating Botton in Navigation Bar

To create clickable buttons that can redirect your users to other pages or sites, drag in an other stacked layout into our navigational bar. Set the orientation to Horizontal and set Columns in Gap Sizing to 10px. This will put a 10px gap between all elements within this stacked layout.

<figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F1NxdDc5Dss0aFJqp4Ve6%2FScreen%20Recording%202023-04-19%20at%202.04.16%20PM.gif?alt=media&amp;token=301fbee5-fb2d-4424-ab66-01f888d31e44" alt=""><figcaption></figcaption></figure>

Next we will grab two \`Button\` modules and drag them into the stacked layout. In the Properties Panel we can give them names and in the styling tab, change the background color to white.&#x20;

<div align="center"><figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FwPeBz2bq0MNeeyneX5ip%2FScreenshot%202023-04-19%20at%203.17.33%20PM.png?alt=media&amp;token=0f75431e-65c3-44c5-9ed9-3efb9c8bbf99" alt=""><figcaption></figcaption></figure> <figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F7O0XZnDhdTJnimaZo4Yq%2FScreenshot%202023-04-19%20at%203.16.04%20PM.png?alt=media&amp;token=0db05f2a-d470-4b0b-af49-ed98a797e0e9" alt=""><figcaption></figcaption></figure></div>

In the Button Properties, you'll be able to add a URL link and you'll see a check box that will allow the link to be opened on same page or new tab when clicked.

<div><figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FLwgm9zebPuIaZQg646Cx%2FScreenshot%202023-04-19%20at%204.47.51%20PM.png?alt=media&amp;token=38899108-30a1-423a-ba7f-9892e91bec77" alt=""><figcaption></figcaption></figure> <figure><img src="https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F9mx4wVfxopFEnTWed8sL%2FScreen%20Recording%202023-04-19%20at%204.48.25%20PM.gif?alt=media&amp;token=9b94a12b-b8be-41ad-93a1-cbb67c721fd1" alt=""><figcaption></figcaption></figure></div>

{% embed url="<https://www.youtube.com/watch?feature=emb_title&v=jT8KHkuv51k>" %}
