# Nav Bar

## Motion Functions

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Identification Function</td><td><a href="https://1568998344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjR69WFqQtm3K6aW02kWi%2Fuploads%2FOHFkdpfo3J9YVvoS4gU2%2FIdentification_Reduced.gif?alt=media&#x26;token=f1d8ff5f-1ece-473b-8721-616674253a13">Identification_Reduced.gif</a></td></tr><tr><td>Structural Function</td><td><a href="https://1568998344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjR69WFqQtm3K6aW02kWi%2Fuploads%2F3u9JLKHGk2bUkjNlmENl%2FStructure_Reduced.gif?alt=media&#x26;token=86b66ea8-6157-48c2-811f-5b8b54513944">Structure_Reduced.gif</a></td></tr></tbody></table>

Identification and Structure are the motion functions associated with a Nav Bar. The icons on the nav bar are extensions of icon buttons and show the user what functions they perform. The extended set of icons also informs users of the structure and information layout of the interface and helps them understand the significant features present in the product.&#x20;

## Examples

<figure><img src="https://1568998344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjR69WFqQtm3K6aW02kWi%2Fuploads%2FdJ5cnZwyNCJ56r3WpoVu%2Fmenubar.gif?alt=media&#x26;token=ed23bcd9-9806-4389-baef-d49b70724713" alt=""><figcaption><p>Twitter Sidebar (Light) by Aaron Iker.</p></figcaption></figure>

In the sidebar example, the navigation bar consists of groups of icon buttons with text. These buttons have similar functions to the icon button, where they permit the identification of the task the user wants to perform. AS there are multiple buttons grouped, the user also gains an understanding of what the structure of the interface looks like and how they can navigate through it.&#x20;

<div><figure><img src="https://1568998344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjR69WFqQtm3K6aW02kWi%2Fuploads%2FOKlCojeErxaEhgRRNfq5%2Fnavbar2.gif?alt=media&#x26;token=85b57fcd-30cd-4e3f-a490-942ad1c362ed" alt=""><figcaption><p>Nav Bar Animations with Lottie by David Schnorr</p></figcaption></figure> <figure><img src="https://1568998344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjR69WFqQtm3K6aW02kWi%2Fuploads%2FgsWO1ey3iD6R1YmTL4dN%2Fnavbar1.gif?alt=media&#x26;token=3dcf5dc2-6b20-4a02-9469-d6c619433677" alt=""><figcaption><p>App Store Tab Bar Interaction by Erfan</p></figcaption></figure></div>

Similarly, in the above examples, icon buttons are grouped to make up a bottom navigation bar. These buttons have a color change and transformation to react to the user's input. The selected icon button is always highlighted to inform the user of where they are within the interface.&#x20;

<figure><img src="https://1568998344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjR69WFqQtm3K6aW02kWi%2Fuploads%2Fu245egPHAu8Y4YJfYWBx%2Fnavbar3.gif?alt=media&#x26;token=c46da89f-c6e6-4850-b587-61d6f5304a51" alt=""><figcaption><p>Nav Interaction by Ayana Campbell Smith</p></figcaption></figure>

Tab bars are another form of a navigational bar. These can use text or icons to enable switching between multiple tabs on a page. In this example, the parenting principle showcases the relationship between the rectangle that shows selection and the selected item. When a tab is selected, the rectangle moves underneath that text field, highlighting the realtionship between them.&#x20;
