# Navigation

### Structure

* Can have a separate background or the same as body bg
* Branding on the left side - logo (usually SVG) and nav right-aligned
* Solid visual hierarchy is essential - the logo should be separated visually
* The active tab should be marked - via font weight or it can be underlined
* The navbar can also include other elements such as a search bar, and dropdowns (visual hierarchy is essential in this case - top navigation is more important than dropdown elements)\
  ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FTCWc22ez0DTT7SB5Bbjr%2Fimage.png?alt=media\&token=7b87cca7-d514-48f3-b456-b1c0818f60a0)![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FyeWNKxbig1WyZc33NPWA%2Fimage.png?alt=media\&token=86832c91-bd35-48cb-a8e9-3b1849aac7fa)![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2F2izzfMKY0fEDAJu4t8O7%2Fimage.png?alt=media\&token=d7497f98-d10d-491f-bfe6-9316f015167a)
* Responsiveness! - The hamburger menu is standard on mobile

{% @figma/embed fileId="iiLQGDW7zrWa2MFuI9Bo2j" nodeId="0:1" url="<https://www.figma.com/file/iiLQGDW7zrWa2MFuI9Bo2j/navigation-pre?node-id=0:1&t=CrMdumQpRlYNdLE3-1>" %}

### Examples

| Before                                                                                                                                                                                                             | After                                                                                                                                                                                                              | Mistakes                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2F2XbKE7oPK2yJRqMrmmzP%2Fimage.png?alt=media\&token=7b9c027e-699b-4608-b797-84c260c9cf9c) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FVZECih044AngUeah2Dpl%2Fimage.png?alt=media\&token=7c1c719b-c5b0-41fd-86d3-c2be57114aae) | <ul><li>No active page status</li><li>Contrast (on hover)</li></ul> |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FTgxd9Hy64isznjF71Xtn%2Fimage.png?alt=media\&token=261f2281-545d-4688-a415-50e25b1ab10c) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FJ67Lf9FjMjIxVXGKesss%2Fimage.png?alt=media\&token=de595cb4-cefe-42d8-b5fa-c63cf2bd83b5) | <ul><li>Nothing wrong here :)</li></ul>                             |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2F9sucBTHq6iIMSdrwLyLK%2Fimage.png?alt=media\&token=be543a8f-bbec-47ae-b2ff-ca3c3bf3a4ca) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FZN91JM2zN7ybsajsvq4g%2Fimage.png?alt=media\&token=b4558012-34cb-4234-b28a-93a14a330e47) | <ul><li>Alignment</li><li>Color (logo)</li></ul>                    |