primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-11 16:36:07 +03:00
Code Issues Projects Releases Wiki Activity

Add links to PVC (#2346)

Browse Source 
* Add links to PVC

And break some bundles (e.g. navigation) apart

* Ignore some of the new pages

* Revert "Ignore some of the new pages"

This reverts commit 854802e7ca.
This commit is contained in:
simurai 2022-12-16 09:06:08 +09:00 committed by GitHub
parent ecbcbb1b04
commit 0e74c3f3fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 849 additions and 746 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content/components/alerts.md
View File

@ -3,6 +3,7 @@ title: Alerts
path: components/alerts
status: Stable
source: 'https://github.com/primer/css/tree/main/src/alerts'
rails: 'https://primer.style/view-components/components/alpha/banner'
bundle: alerts
---

152
docs/content/components/avatar-stack.md Normal file
View File

@ -0,0 +1,152 @@
---
title: AvatarStack
path: components/avatar-stack
status: Stable
source: 'https://github.com/primer/css/tree/main/src/avatars'
rails: 'https://primer.style/view-components/components/beta/avatarstack'
bundle: avatars
---
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
```html live
<div class="AvatarStack AvatarStack--three-plus">
<div
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
aria-label="octocat, octocat, and octocat"
>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</div>
</div>
```
Based on the number of avatars in the stack, add these modifier classes:
- `AvatarStack--two` for 2 avatars.
- `AvatarStack--three-plus` for 3 or more avatars.
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
```html live
<div class="AvatarStack AvatarStack--three-plus">
<div
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
aria-label="octocat, octocat, octocat, octocat, and octocat"
>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<div class="avatar avatar-more"></div>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</div>
</div>
```
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
```html live
<div class="AvatarStack AvatarStack--two">
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
<a href="#" class="avatar">
<img
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</a>
<a href="#" class="avatar">
<img
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</a>
</div>
</div>
```
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
```html live
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
<div
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
aria-label="octocat, octocat, and octocat"
>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</div>
</div>
```

147
docs/content/components/avatars.md
View File

@ -3,6 +3,7 @@ title: Avatars
path: components/avatars
status: Stable
source: 'https://github.com/primer/css/tree/main/src/avatars'
rails: 'https://primer.style/view-components/components/beta/avatar'
bundle: avatars
---
@ -52,152 +53,6 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly
</div>
```
### Avatar stack
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
```html live
<div class="AvatarStack AvatarStack--three-plus">
<div
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
aria-label="octocat, octocat, and octocat"
>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</div>
</div>
```
Based on the number of avatars in the stack, add these modifier classes:
- `AvatarStack--two` for 2 avatars.
- `AvatarStack--three-plus` for 3 or more avatars.
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
```html live
<div class="AvatarStack AvatarStack--three-plus">
<div
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
aria-label="octocat, octocat, octocat, octocat, and octocat"
>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<div class="avatar avatar-more"></div>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</div>
</div>
```
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
```html live
<div class="AvatarStack AvatarStack--two">
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
<a href="#" class="avatar">
<img
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</a>
<a href="#" class="avatar">
<img
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</a>
</div>
</div>
```
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
```html live
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
<div
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
aria-label="octocat, octocat, and octocat"
>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
<img
class="avatar"
height="20"
alt="@octocat"
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
width="20"
/>
</div>
</div>
```
## Circle badge
`.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.

1
docs/content/components/blankslate.md
View File

@ -3,6 +3,7 @@ title: Blankslate
path: components/blankslate
status: Stable
source: 'https://github.com/primer/css/tree/main/src/blankslate'
rails: 'https://primer.style/view-components/components/beta/blankslate'
bundle: blankslate
---

1
docs/content/components/box-overlay.md
View File

@ -4,6 +4,7 @@ path: components/box-overlay
status: Alpha
status_issue: 'https://github.com/github/design-systems/issues/374'
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/box-overlay.scss'
rails: 'https://primer.style/view-components/components/alpha/dialog'
symbols: [Box--overlay, Box-header, Box-overlay--narrow, Box-overlay--wide]
keywords: [box, overlay]
---

1
docs/content/components/box.md
View File

@ -4,6 +4,7 @@ path: components/box
status_issue: 'https://github.com/github/design-systems/issues/198'
status: Stable
source: 'https://github.com/primer/css/tree/main/src/box'
rails: 'https://primer.style/view-components/components/beta/borderbox'
bundle: box
---

1
docs/content/components/breadcrumb.md
View File

@ -3,6 +3,7 @@ title: Breadcrumbs
path: components/breadcrumb
status: Stable
source: 'https://github.com/primer/css/tree/main/src/breadcrumb'
rails: 'https://primer.style/view-components/components/beta/breadcrumbs'
bundle: breadcrumb
---

47
docs/content/components/button-group.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Button group
path: components/button-group
status: Stable
source: 'https://github.com/primer/css/tree/main/src/buttons'
rails: 'https://primer.style/view-components/components/beta/buttongroup'
bundle: buttons
---
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
```html live
<div class="BtnGroup d-block mb-2">
<button class="BtnGroup-item btn" type="button">Button</button>
<button class="BtnGroup-item btn" type="button">Button</button>
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
</div>
<div class="BtnGroup d-block mb-2 ml-0">
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
</div>
```
Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
```html live
<div class="BtnGroup">
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
</div>
```
Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
```html live
<div class="BtnGroup">
<button class="btn BtnGroup-item" type="button">Button</button>
<form class="BtnGroup-parent">
<button class="btn BtnGroup-item" type="button">Button in a form</button>
</form>
<button class="btn BtnGroup-item" type="button">Button</button>
<button class="btn BtnGroup-item" type="button">Button</button>
</div>
```

42
docs/content/components/buttons.md
View File

@ -3,6 +3,7 @@ title: Buttons
path: components/buttons
status: Stable
source: 'https://github.com/primer/css/tree/main/src/buttons'
rails: 'https://primer.style/view-components/components/beta/button'
bundle: buttons
---
@ -254,44 +255,3 @@ You can also use the [counter](./labels#counters) component within buttons:
Button <span class="Counter">12</span>
</button>
```
## Button groups
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
```html live
<div class="BtnGroup d-block mb-2">
<button class="BtnGroup-item btn" type="button">Button</button>
<button class="BtnGroup-item btn" type="button">Button</button>
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
</div>
<div class="BtnGroup d-block mb-2 ml-0">
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
</div>
```
Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
```html live
<div class="BtnGroup">
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
</div>
```
Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
```html live
<div class="BtnGroup">
<button class="btn BtnGroup-item" type="button">Button</button>
<form class="BtnGroup-parent">
<button class="btn BtnGroup-item" type="button">Button in a form</button>
</form>
<button class="btn BtnGroup-item" type="button">Button</button>
<button class="btn BtnGroup-item" type="button">Button</button>
</div>
```

48
docs/content/components/counter.md Normal file
View File

@ -0,0 +1,48 @@
---
title: Counter
path: components/counter
status: Stable
source: 'https://github.com/primer/css/tree/main/src/labels'
rails: 'https://primer.style/view-components/components/beta/counter'
bundle: labels
---
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
1. the default `Counter`,
2. the `Counter--primary` with a stronger background color
3. and `Counter--secondary` with a more subtle text color.
Note: When a counter is empty, its visibility will be hidden.
```html live
<span class="Counter mr-1">1</span>
<span class="Counter mr-1 Counter--primary">23</span>
<span class="Counter mr-1 Counter--secondary">456</span>
```
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
```html live
<div class="tabnav">
<nav class="tabnav-tabs" aria-label="Foo bar">
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</span></a>
<a href="#url" class="tabnav-tab">Bar tab</a>
</nav>
</div>
```
You can also have icons and emojis in counters. Or use utilities for counters with different background colors.
```html live
<span class="Counter mr-1">1.5K</span>
<span class="Counter mr-1">
<!-- <%= octicon "comment" %> -->
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
10
</span>
<span class="Counter mr-1">👍 2</span>
<span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis">22</span>
<span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis">22</span>
<span class="Counter mr-1 color-bg-accent-emphasis color-fg-on-emphasis">22</span>
```

2
docs/content/components/dropdown.md
View File

@ -1,6 +1,8 @@
---
title: Dropdown
status: Beta
source: 'https://github.com/primer/css/tree/main/src/dropdown'
rails: 'https://primer.style/view-components/components/alpha/dropdown'
---
Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.

31
docs/content/components/filter-list.md Normal file
View File

@ -0,0 +1,31 @@
---
title: Filter list
path: components/filter-list
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
bundle: navigation
---
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
```html live title="filter-list"
<ul class="filter-list">
<li>
<a class="filter-item" href="#url" aria-current="page">
First filter
<span class="count">21</span>
</a>
</li>
<li>
<a class="filter-item" href="#url">
Second filter
<span class="count">3</span>
</a>
</li>
<li>
<a class="filter-item" href="#url">
Third filter
</a>
</li>
</ul>
```

95
docs/content/components/labels.md
View File

@ -4,10 +4,11 @@ path: components/labels
status_issue: 'https://github.com/github/design-systems/issues/332'
status: Stable
source: 'https://github.com/primer/css/tree/main/src/labels'
rails: 'https://primer.style/view-components/components/beta/label'
bundle: labels
---
Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
Labels add metadata or indicate status of items and navigational elements.
## Labels
@ -99,98 +100,6 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
<span class="IssueLabel IssueLabel--big color-bg-attention-emphasis color-fg-on-emphasis mr-1">🚂 deploy: train</span>
```
## States
Use state labels to inform users of an item's status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
- `State`
- `State State--draft`
- `State State--open`
- `State State--merged`
- `State State--closed`
```html live
<span class="State State--draft mr-2">Draft</span>
<span class="State State--open mr-2">
<!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Open
</span>
<span class="State State--merged mr-2">
<!-- <%= octicon "git-merge" %> -->
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
Merged
</span>
<span class="State State--closed mr-2" title="Status: closed">
<!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Closed
</span>
```
### Small states
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
```html live
<span class="State State--small mr-2">Default</span>
<span class="State State--small State--open mr-2">
<!-- <%= octicon "issue-opened" %> -->
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
Open
</span>
<span class="State State--small State--closed mr-2">
<!-- <%= octicon "issue-closed" %> -->
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
Closed
</span>
```
## Counters
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
1. the default `Counter`,
2. the `Counter--primary` with a stronger background color
3. and `Counter--secondary` with a more subtle text color.
Note: When a counter is empty, its visibility will be hidden.
```html live
<span class="Counter mr-1">1</span>
<span class="Counter mr-1 Counter--primary">23</span>
<span class="Counter mr-1 Counter--secondary">456</span>
```
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
```html live
<div class="tabnav">
<nav class="tabnav-tabs" aria-label="Foo bar">
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</span></a>
<a href="#url" class="tabnav-tab">Bar tab</a>
</nav>
</div>
```
You can also have icons and emojis in counters. Or use utilities for counters with different background colors.
```html live
<span class="Counter mr-1">1.5K</span>
<span class="Counter mr-1">
<!-- <%= octicon "comment" %> -->
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
10
</span>
<span class="Counter mr-1">👍 2</span>
<span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis">22</span>
<span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis">22</span>
<span class="Counter mr-1 color-bg-accent-emphasis color-fg-on-emphasis">22</span>
```
## Diffstat
Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red.

1
docs/content/components/layout.md
View File

@ -3,6 +3,7 @@ title: Layout
path: components/layout
status: Alpha
source: 'https://github.com/primer/css/tree/main/src/layout/layout.scss'
rails: 'https://primer.style/view-components/components/alpha/layout'
bundle: layout
---

1
docs/content/components/links.md
View File

@ -3,6 +3,7 @@ title: Links
path: components/links
status: Beta
source: 'https://github.com/primer/css/tree/main/src/links'
rails: 'https://primer.style/view-components/components/beta/link'
bundle: links
---

86
docs/content/components/menu.md Normal file
View File

@ -0,0 +1,86 @@
---
title: Menu
path: components/menu
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
rails: 'https://primer.style/view-components/components/alpha/menu'
bundle: navigation
---
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
```html live title="Menu"
<nav class="menu" aria-label="Person settings">
<a class="menu-item" href="#url" aria-current="page">Account</a>
<a class="menu-item" href="#url">Profile</a>
<a class="menu-item" href="#url">Emails</a>
<a class="menu-item" href="#url">Notifications</a>
</nav>
```
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
```html live
<nav class="menu" aria-label="Person settings">
<a class="menu-item" href="#url" aria-current="page">
<!-- <%= octicon "tools" %> -->
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-tools" aria-hidden="true">
<path
fill-rule="evenodd"
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
/>
</svg>
Account
</a>
<a class="menu-item" href="#url">
<!-- <%= octicon "person" %> -->
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person" aria-hidden="true">
<path
fill-rule="evenodd"
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
/>
</svg>
Profile
</a>
<a class="menu-item" href="#url">
<!-- <%= octicon "mail" %>-->
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail" aria-hidden="true">
<path
fill-rule="evenodd"
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
/>
</svg>
Emails
</a>
<a class="menu-item" href="#url">
<!-- <%= octicon "radio-tower" %> -->
<svg
version="1.1"
width="16"
height="16"
viewBox="0 0 16 16"
class="octicon octicon-radio-tower"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.79 6.11c.25-.25.25-.67 0-.92-.32-.33-.48-.76-.48-1.19 0-.43.16-.86.48-1.19.25-.26.25-.67 0-.92a.613.613 0 0 0-.45-.19c-.16 0-.33.06-.45.19-.57.58-.85 1.35-.85 2.11 0 .76.29 1.53.85 2.11.25.25.66.25.9 0zM2.33.52a.651.651 0 0 0-.92 0C.48 1.48.01 2.74.01 3.99c0 1.26.47 2.52 1.4 3.48.25.26.66.26.91 0s.25-.68 0-.94c-.68-.7-1.02-1.62-1.02-2.54 0-.92.34-1.84 1.02-2.54a.66.66 0 0 0 .01-.93zm5.69 5.1A1.62 1.62 0 1 0 6.4 4c-.01.89.72 1.62 1.62 1.62zM14.59.53a.628.628 0 0 0-.91 0c-.25.26-.25.68 0 .94.68.7 1.02 1.62 1.02 2.54 0 .92-.34 1.83-1.02 2.54-.25.26-.25.68 0 .94a.651.651 0 0 0 .92 0c.93-.96 1.4-2.22 1.4-3.48A5.048 5.048 0 0 0 14.59.53zM8.02 6.92c-.41 0-.83-.1-1.2-.3l-3.15 8.37h1.49l.86-1h4l.84 1h1.49L9.21 6.62c-.38.2-.78.3-1.19.3zm-.01.48L9.02 11h-2l.99-3.6zm-1.99 5.59l1-1h2l1 1h-4zm5.19-11.1c-.25.25-.25.67 0 .92.32.33.48.76.48 1.19 0 .43-.16.86-.48 1.19-.25.26-.25.67 0 .92a.63.63 0 0 0 .9 0c.57-.58.85-1.35.85-2.11 0-.76-.28-1.53-.85-2.11a.634.634 0 0 0-.9 0z"
/>
</svg>
<span class="Counter">3</span>
Notifications
</a>
</nav>
```
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
```html live title="Menu with heading"
<nav class="menu" aria-labelledby="menu-heading">
<span class="menu-heading" id="menu-heading">Menu heading</span>
<a class="menu-item" href="#url" aria-current="page">Account</a>
<a class="menu-item" href="#url">Profile</a>
<a class="menu-item" href="#url">Emails</a>
<a class="menu-item" href="#url">Notifications</a>
</nav>
```

472
docs/content/components/navigation.md
View File

@ -8,469 +8,9 @@ bundle: navigation
Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
## Menu
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
```html live title="Menu"
<nav class="menu" aria-label="Person settings">
<a class="menu-item" href="#url" aria-current="page">Account</a>
<a class="menu-item" href="#url">Profile</a>
<a class="menu-item" href="#url">Emails</a>
<a class="menu-item" href="#url">Notifications</a>
</nav>
```
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
```html live
<nav class="menu" aria-label="Person settings">
<a class="menu-item" href="#url" aria-current="page">
<!-- <%= octicon "tools" %> -->
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-tools" aria-hidden="true">
<path
fill-rule="evenodd"
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
/>
</svg>
Account
</a>
<a class="menu-item" href="#url">
<!-- <%= octicon "person" %> -->
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person" aria-hidden="true">
<path
fill-rule="evenodd"
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
/>
</svg>
Profile
</a>
<a class="menu-item" href="#url">
<!-- <%= octicon "mail" %>-->
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail" aria-hidden="true">
<path
fill-rule="evenodd"
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
/>
</svg>
Emails
</a>
<a class="menu-item" href="#url">
<!-- <%= octicon "radio-tower" %> -->
<svg
version="1.1"
width="16"
height="16"
viewBox="0 0 16 16"
class="octicon octicon-radio-tower"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.79 6.11c.25-.25.25-.67 0-.92-.32-.33-.48-.76-.48-1.19 0-.43.16-.86.48-1.19.25-.26.25-.67 0-.92a.613.613 0 0 0-.45-.19c-.16 0-.33.06-.45.19-.57.58-.85 1.35-.85 2.11 0 .76.29 1.53.85 2.11.25.25.66.25.9 0zM2.33.52a.651.651 0 0 0-.92 0C.48 1.48.01 2.74.01 3.99c0 1.26.47 2.52 1.4 3.48.25.26.66.26.91 0s.25-.68 0-.94c-.68-.7-1.02-1.62-1.02-2.54 0-.92.34-1.84 1.02-2.54a.66.66 0 0 0 .01-.93zm5.69 5.1A1.62 1.62 0 1 0 6.4 4c-.01.89.72 1.62 1.62 1.62zM14.59.53a.628.628 0 0 0-.91 0c-.25.26-.25.68 0 .94.68.7 1.02 1.62 1.02 2.54 0 .92-.34 1.83-1.02 2.54-.25.26-.25.68 0 .94a.651.651 0 0 0 .92 0c.93-.96 1.4-2.22 1.4-3.48A5.048 5.048 0 0 0 14.59.53zM8.02 6.92c-.41 0-.83-.1-1.2-.3l-3.15 8.37h1.49l.86-1h4l.84 1h1.49L9.21 6.62c-.38.2-.78.3-1.19.3zm-.01.48L9.02 11h-2l.99-3.6zm-1.99 5.59l1-1h2l1 1h-4zm5.19-11.1c-.25.25-.25.67 0 .92.32.33.48.76.48 1.19 0 .43-.16.86-.48 1.19-.25.26-.25.67 0 .92a.63.63 0 0 0 .9 0c.57-.58.85-1.35.85-2.11 0-.76-.28-1.53-.85-2.11a.634.634 0 0 0-.9 0z"
/>
</svg>
<span class="Counter">3</span>
Notifications
</a>
</nav>
```
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
```html live title="Menu with heading"
<nav class="menu" aria-labelledby="menu-heading">
<span class="menu-heading" id="menu-heading">Menu heading</span>
<a class="menu-item" href="#url" aria-current="page">Account</a>
<a class="menu-item" href="#url">Profile</a>
<a class="menu-item" href="#url">Emails</a>
<a class="menu-item" href="#url">Notifications</a>
</nav>
```
## Underline Nav
Use `.UnderlineNav` to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
To add a selected state to an item, use:
- `role="tab"` and `aria-selected="true"` if it's a button
- `aria-current="page"` if it's a link
```html live title="UnderlineNav"
<nav class="UnderlineNav">
<div class="UnderlineNav-body" role="tablist">
<button class="UnderlineNav-item" role="tab" type="button" aria-selected="true">Item 1</button>
<button class="UnderlineNav-item" role="tab" type="button">Item 2</button>
<button class="UnderlineNav-item" role="tab" type="button">Item 3</button>
<button class="UnderlineNav-item" role="tab" type="button">Item 4</button>
</div>
</nav>
```
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
```html live title="UnderlineNav-actions"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn btn-sm">Button</a>
</div>
</nav>
```
Use `.UnderlineNav--right` to right align the navigation.
```html live title="UnderlineNav--right"
<nav class="UnderlineNav UnderlineNav--right">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
</nav>
```
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
```html live title="UnderlineNav--right with actions"
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
<div class="UnderlineNav-actions">
<a class="btn btn-sm">Button</a>
</div>
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
</nav>
```
<!-- Update wording here -->
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
```html live
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 1</span>
</a>
<a class="UnderlineNav-item" href="#url">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 2</span>
<span class="Counter">10</span>
</a>
<a class="UnderlineNav-item" href="#url">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 3</span>
</a>
<a class="UnderlineNav-item" href="#url">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 4</span>
</a>
</div>
</nav>
```
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
```html live title="UnderlineNav--full"
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
<div class="container-lg UnderlineNav-container">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2<span class="Counter">10</span></a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn btn-sm">Button</a>
</div>
</div>
</nav>
```
## Side Nav
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../utilities/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../utilities/flexbox) for positioning alongside content.
- You can use a **border** if the parent element doesn't have it already.
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
```html live
<nav class="SideNav border" style="max-width: 360px">
<a class="SideNav-item" href="#url">Account</a>
<a class="SideNav-item" href="#url" aria-current="page">Profile</a>
<a class="SideNav-item" href="#url">Emails</a>
<a class="SideNav-item" href="#url">Notifications</a>
</nav>
```
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
```html live
<nav class="SideNav border" style="max-width: 360px">
<a class="SideNav-item" href="#url">
Text only
</a>
<a class="SideNav-item" href="#url">
<img
class="avatar avatar-small mr-2"
src="https://avatars.githubusercontent.com/hubot?s=40"
alt="hubot"
height="20"
width="20"
/>
With an avatar
</a>
<a class="SideNav-item" href="#url">
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
<svg class="SideNav-icon octicon octicon-octoface" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
With an icon
</a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a status icon
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2 float-right" %> -->
<svg
version="1.1"
width="8"
height="16"
viewBox="0 0 8 16"
class="octicon octicon-primitive-dot color-green-5 ml-2 float-right"
aria-hidden="true"
>
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
</svg>
</a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a label <span class="Label">label</span>
</a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a counter <span class="Counter ml-1">16</span>
</a>
<a class="SideNav-item" href="#url">
<h5>With a heading</h5>
<span>and some longer description</span>
</a>
</nav>
```
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
```html live
<aside class="color-bg-subtle border p-3" style="max-width: 360px">
<h5 class="color-fg-muted mb-2 pb-1 border-bottom">Menu</h5>
<nav class="SideNav">
<a class="SideNav-subItem" href="#url">Account</a>
<a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
<a class="SideNav-subItem" href="#url">Emails</a>
<a class="SideNav-subItem" href="#url">Notifications</a>
</nav>
</aside>
```
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
```html live
<nav class="SideNav border" style="max-width: 360px">
<a class="SideNav-item" href="#url">
<!-- <%= octicon "person", class: "SideNav-icon" %> -->
<svg class="octicon octicon-person SideNav-icon" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true"> <path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z" /> </svg>
<span>Account</span>
</a>
<a class="SideNav-item" href="#url" aria-current="page">
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
<svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
<span>Profile</span>
</a>
<nav class="SideNav color-bg-default border-top py-3" style="padding-left: 44px">
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
<a class="SideNav-subItem" href="#url">Sub item 2</a>
<a class="SideNav-subItem" href="#url">Sub item 3</a>
</nav>
<a class="SideNav-item" href="#url">
<!-- <%= octicon "mail", class: "SideNav-icon" %> -->
<svg class="octicon octicon-mail SideNav-icon" width="14" height="16" viewBox="0 0 14 16" aria-hidden="true"> <path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z" /> </svg>
<span>Emails</span>
</a>
</nav>
```
## Tabnav
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
```html live title="tabnav"
<div class="tabnav">
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo tab</a>
<a class="tabnav-tab" href="#url">Bar tab</a>
</nav>
</div>
```
Tabs can also contain icons and counters.
```html live
<div class="tabnav">
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">
<!-- <%= octicon "comment-discussion" %> -->
<svg class="octicon octicon-comment-discussion" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.75C1.5 2.6837 1.52634 2.62011 1.57322 2.57322C1.62011 2.52634 1.6837 2.5 1.75 2.5H10.25C10.3163 2.5 10.3799 2.52634 10.4268 2.57322C10.4737 2.62011 10.5 2.6837 10.5 2.75V8.25C10.5 8.3163 10.4737 8.37989 10.4268 8.42678C10.3799 8.47366 10.3163 8.5 10.25 8.5H6.75C6.55115 8.50017 6.36052 8.57931 6.22 8.72L3.5 11.44V9.25C3.5 9.05109 3.42098 8.86032 3.28033 8.71967C3.13968 8.57902 2.94891 8.5 2.75 8.5H1.75C1.6837 8.5 1.62011 8.47366 1.57322 8.42678C1.52634 8.37989 1.5 8.3163 1.5 8.25V2.75ZM1.75 1C1.28587 1 0.840752 1.18437 0.512563 1.51256C0.184374 1.84075 0 2.28587 0 2.75L0 8.25C0 9.216 0.784 10 1.75 10H2V11.543C2.0001 11.8311 2.08561 12.1127 2.24571 12.3522C2.40581 12.5917 2.63333 12.7784 2.8995 12.8886C3.16567 12.9988 3.45854 13.0277 3.74111 12.9715C4.02367 12.9153 4.28324 12.7767 4.487 12.573L7.061 10H10.25C10.7141 10 11.1592 9.81563 11.4874 9.48744C11.8156 9.15925 12 8.71413 12 8.25V2.75C12 2.28587 11.8156 1.84075 11.4874 1.51256C11.1592 1.18437 10.7141 1 10.25 1H1.75ZM14.5 4.75C14.5 4.6837 14.4737 4.62011 14.4268 4.57322C14.3799 4.52634 14.3163 4.5 14.25 4.5H13.75C13.5511 4.5 13.3603 4.42098 13.2197 4.28033C13.079 4.13968 13 3.94891 13 3.75C13 3.55109 13.079 3.36032 13.2197 3.21967C13.3603 3.07902 13.5511 3 13.75 3H14.25C15.216 3 16 3.784 16 4.75V10.25C16 10.7141 15.8156 11.1592 15.4874 11.4874C15.1592 11.8156 14.7141 12 14.25 12H14V13.543C13.9999 13.8311 13.9144 14.1127 13.7543 14.3522C13.5942 14.5917 13.3667 14.7784 13.1005 14.8886C12.8343 14.9988 12.5415 15.0277 12.2589 14.9715C11.9763 14.9153 11.7168 14.7767 11.513 14.573L9.22 12.28C9.14631 12.2113 9.08721 12.1285 9.04622 12.0365C9.00523 11.9445 8.98318 11.8452 8.98141 11.7445C8.97963 11.6438 8.99816 11.5438 9.03588 11.4504C9.0736 11.357 9.12974 11.2722 9.20096 11.201C9.27218 11.1297 9.35701 11.0736 9.4504 11.0359C9.54379 10.9982 9.64382 10.9796 9.74452 10.9814C9.84523 10.9832 9.94454 11.0052 10.0365 11.0462C10.1285 11.0872 10.2113 11.1463 10.28 11.22L12.5 13.44V11.25C12.5 11.0511 12.579 10.8603 12.7197 10.7197C12.8603 10.579 13.0511 10.5 13.25 10.5H14.25C14.3163 10.5 14.3799 10.4737 14.4268 10.4268C14.4737 10.3799 14.5 10.3163 14.5 10.25V4.75Z"></path></svg>
<span>Conversation</span>
<span class="Counter">2</span>
</a>
<a class="tabnav-tab" href="#url">
<!-- <%= octicon "git-commit" %> -->
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 7.75C10.5 8.41305 10.2366 9.04893 9.76777 9.51777C9.29893 9.98661 8.66304 10.25 8 10.25C7.33696 10.25 6.70107 9.98661 6.23223 9.51777C5.76339 9.04893 5.5 8.41305 5.5 7.75C5.5 7.08696 5.76339 6.45108 6.23223 5.98224C6.70107 5.5134 7.33696 5.25 8 5.25C8.66304 5.25 9.29893 5.5134 9.76777 5.98224C10.2366 6.45108 10.5 7.08696 10.5 7.75ZM11.93 8.5C11.7554 9.41441 11.2674 10.2393 10.5501 10.8327C9.83272 11.426 8.93093 11.7506 8 11.7506C7.06907 11.7506 6.16728 11.426 5.44994 10.8327C4.73259 10.2393 4.2446 9.41441 4.07 8.5H0.75C0.551088 8.5 0.360322 8.42099 0.21967 8.28033C0.0790176 8.13968 0 7.94892 0 7.75C0 7.55109 0.0790176 7.36033 0.21967 7.21967C0.360322 7.07902 0.551088 7 0.75 7H4.07C4.2446 6.0856 4.73259 5.26069 5.44994 4.66736C6.16728 4.07403 7.06907 3.7494 8 3.7494C8.93093 3.7494 9.83272 4.07403 10.5501 4.66736C11.2674 5.26069 11.7554 6.0856 11.93 7H15.25C15.4489 7 15.6397 7.07902 15.7803 7.21967C15.921 7.36033 16 7.55109 16 7.75C16 7.94892 15.921 8.13968 15.7803 8.28033C15.6397 8.42099 15.4489 8.5 15.25 8.5H11.93Z"></path></svg>
<span>Commits</span>
<span class="Counter">3</span>
</a>
<a class="tabnav-tab" href="#url">
<!-- <%= octicon "checklist" %> -->
<svg class="octicon octicon-checklist" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.75C2.5 1.61193 2.61193 1.5 2.75 1.5H11.25C11.3881 1.5 11.5 1.61193 11.5 1.75V9.48645C11.5 9.90067 11.8358 10.2365 12.25 10.2365C12.6642 10.2365 13 9.90067 13 9.48645V1.75C13 0.783502 12.2165 0 11.25 0H2.75C1.7835 0 1 0.783502 1 1.75V13.25C1 14.2165 1.7835 15 2.75 15H5.92083C6.33504 15 6.67083 14.6642 6.67083 14.25C6.67083 13.8358 6.33504 13.5 5.92083 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25V1.75ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H9.25C9.66421 5.5 10 5.16421 10 4.75C10 4.33579 9.66421 4 9.25 4H4.75ZM4 7.75C4 7.33579 4.33579 7 4.75 7H6.75C7.16421 7 7.5 7.33579 7.5 7.75C7.5 8.16421 7.16421 8.5 6.75 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75ZM15.774 11.2866C16.0703 10.9972 16.076 10.5223 15.7866 10.226C15.4972 9.92965 15.0223 9.92402 14.726 10.2134L10.7003 14.1447L9.28127 12.7206C8.98889 12.4272 8.51402 12.4264 8.22061 12.7187C7.9272 13.0111 7.92636 13.486 8.21873 13.7794L10.1618 15.7294C10.4521 16.0207 10.9229 16.0239 11.2171 15.7366L15.774 11.2866Z"></path></svg>
<span>Checks</span>
<span class="Counter">27</span>
</a>
<a class="tabnav-tab" href="#url">
<!-- <%= octicon "diff" %> -->
<svg class="octicon octicon-diff" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 1.5C2.61193 1.5 2.5 1.61193 2.5 1.75V14.25C2.5 14.3881 2.61193 14.5 2.75 14.5H13.25C13.3881 14.5 13.5 14.3881 13.5 14.25V4.66421C13.5 4.59791 13.4737 4.53432 13.4268 4.48744L10.5126 1.57322C10.4657 1.52634 10.4021 1.5 10.3358 1.5H2.75ZM1 1.75C1 0.783502 1.7835 0 2.75 0H10.3358C10.7999 0 11.245 0.184374 11.5732 0.512563L14.4874 3.42678C14.8156 3.75497 15 4.20008 15 4.66421V14.25C15 15.2165 14.2165 16 13.25 16H2.75C1.7835 16 1 15.2165 1 14.25V1.75ZM8 3.25C8.41421 3.25 8.75 3.58579 8.75 4V5.5H10.25C10.6642 5.5 11 5.83579 11 6.25C11 6.66421 10.6642 7 10.25 7H8.75V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V7H5.75C5.33579 7 5 6.66421 5 6.25C5 5.83579 5.33579 5.5 5.75 5.5H7.25V4C7.25 3.58579 7.58579 3.25 8 3.25ZM5 11.25C5 10.8358 5.33579 10.5 5.75 10.5H10.25C10.6642 10.5 11 10.8358 11 11.25C11 11.6642 10.6642 12 10.25 12H5.75C5.33579 12 5 11.6642 5 11.25Z"></path></svg>
<span>Files changed</span>
<span class="Counter">6</span>
</a>
</nav>
</div>
```
Use `.float-right` to align additional elements in the `.tabnav`:
```html live title="tabnav with buttons"
<div class="tabnav">
<a class="btn btn-sm float-right" href="#url" role="button">Button</a>
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
<a class="tabnav-tab" href="#url">Bar Tab</a>
</nav>
</div>
```
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
```html live title="tabnav-extra"
<div class="tabnav">
<div class="tabnav-extra float-right">Tabnav widget text here.</div>
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
<a class="tabnav-tab" href="#url">Bar Tab</a>
</nav>
</div>
```
```html live title="tabnav with everything"
<div class="tabnav">
<div class="float-right">
<a class="tabnav-extra" href="#url">Tabnav extra link</a>
<a class="tabnav-extra" href="#url">Tabnav extra link</a>
</div>
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
<a class="tabnav-tab" href="#url">Bar Tab</a>
</nav>
</div>
```
## Filter list
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
```html live title="filter-list"
<ul class="filter-list">
<li>
<a class="filter-item" href="#url" aria-current="page">
First filter
<span class="count">21</span>
</a>
</li>
<li>
<a class="filter-item" href="#url">
Second filter
<span class="count">3</span>
</a>
</li>
<li>
<a class="filter-item" href="#url">
Third filter
</a>
</li>
</ul>
```
## Sub navigation
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
```html live title="subnav"
<nav class="subnav" aria-label="Repository">
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
<a class="subnav-item" href="#url">Item 2</a>
<a class="subnav-item" href="#url">Item 3</a>
</nav>
```
You can have `subnav-search` in the subnav bar.
```html live
<div class="subnav">
<nav class="subnav-links" aria-label="Repository">
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
<a class="subnav-item" href="#url">Item 2</a>
<a class="subnav-item" href="#url">Item 3</a>
</nav>
<div class="subnav-search float-left">
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
</div>
</div>
```
You can also use a `subnav-search-context` to display search help in a select menu.
```html live
<div class="subnav">
<nav class="subnav-links">
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
<a class="subnav-item" href="#url">Item 2</a>
<a class="subnav-item" href="#url">Item 3</a>
</nav>
</div>
<div class="subnav">
<div class="float-left subnav-search-context">
<button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
Filters
<span class="dropdown-caret"></span>
</button>
</div>
<div class="subnav-search float-left">
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
</div>
</div>
```
- [Menu](./menu)
- [Underline nav](./underline-nav)
- [Side nav](./side-nav)
- [Tabnav](./tabnav)
- [Filter list](./filter-list)
- [Sub navigation](./subnav)

1
docs/content/components/popover.md
View File

@ -4,6 +4,7 @@ path: components/popover
status: Alpha
source: 'https://github.com/primer/css/tree/main/src/popover'
storybook: 'https://primer.style/css/storybook/?path=/story/components-popover--playground'
rails: 'https://primer.style/view-components/components/beta/popover'
bundle: popover
---

1
docs/content/components/progress.md
View File

@ -3,6 +3,7 @@ title: Progress
path: components/progress
status: Beta
source: 'https://github.com/primer/css/tree/main/src/progress'
rails: 'https://primer.style/view-components/components/beta/progressbar'
bundle: progress
---

112
docs/content/components/side-nav.md Normal file
View File

@ -0,0 +1,112 @@
---
title: SideNav
path: components/side-nav
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
rails: 'https://primer.style/view-components/components/alpha/navlist'
bundle: navigation
---
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../utilities/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../utilities/flexbox) for positioning alongside content.
- You can use a **border** if the parent element doesn't have it already.
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
```html live
<nav class="SideNav border" style="max-width: 360px">
<a class="SideNav-item" href="#url">Account</a>
<a class="SideNav-item" href="#url" aria-current="page">Profile</a>
<a class="SideNav-item" href="#url">Emails</a>
<a class="SideNav-item" href="#url">Notifications</a>
</nav>
```
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
```html live
<nav class="SideNav border" style="max-width: 360px">
<a class="SideNav-item" href="#url">
Text only
</a>
<a class="SideNav-item" href="#url">
<img
class="avatar avatar-small mr-2"
src="https://avatars.githubusercontent.com/hubot?s=40"
alt="hubot"
height="20"
width="20"
/>
With an avatar
</a>
<a class="SideNav-item" href="#url">
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
<svg class="SideNav-icon octicon octicon-octoface" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
With an icon
</a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a status icon
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2 float-right" %> -->
<svg
version="1.1"
width="8"
height="16"
viewBox="0 0 8 16"
class="octicon octicon-primitive-dot color-green-5 ml-2 float-right"
aria-hidden="true"
>
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
</svg>
</a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a label <span class="Label">label</span>
</a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a counter <span class="Counter ml-1">16</span>
</a>
<a class="SideNav-item" href="#url">
<h5>With a heading</h5>
<span>and some longer description</span>
</a>
</nav>
```
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
```html live
<aside class="color-bg-subtle border p-3" style="max-width: 360px">
<h5 class="color-fg-muted mb-2 pb-1 border-bottom">Menu</h5>
<nav class="SideNav">
<a class="SideNav-subItem" href="#url">Account</a>
<a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
<a class="SideNav-subItem" href="#url">Emails</a>
<a class="SideNav-subItem" href="#url">Notifications</a>
</nav>
</aside>
```
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
```html live
<nav class="SideNav border" style="max-width: 360px">
<a class="SideNav-item" href="#url">
<!-- <%= octicon "person", class: "SideNav-icon" %> -->
<svg class="octicon octicon-person SideNav-icon" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true"> <path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z" /> </svg>
<span>Account</span>
</a>
<a class="SideNav-item" href="#url" aria-current="page">
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
<svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
<span>Profile</span>
</a>
<nav class="SideNav color-bg-default border-top py-3" style="padding-left: 44px">
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
<a class="SideNav-subItem" href="#url">Sub item 2</a>
<a class="SideNav-subItem" href="#url">Sub item 3</a>
</nav>
<a class="SideNav-item" href="#url">
<!-- <%= octicon "mail", class: "SideNav-icon" %> -->
<svg class="octicon octicon-mail SideNav-icon" width="14" height="16" viewBox="0 0 14 16" aria-hidden="true"> <path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z" /> </svg>
<span>Emails</span>
</a>
</nav>
```

56
docs/content/components/state.md Normal file
View File

@ -0,0 +1,56 @@
---
title: State
path: components/state
status: Stable
source: 'https://github.com/primer/css/tree/main/src/labels'
rails: 'https://primer.style/view-components/components/state'
bundle: labels
---
Use state labels to inform users of an item's status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
- `State`
- `State State--draft`
- `State State--open`
- `State State--merged`
- `State State--closed`
```html live
<span class="State State--draft mr-2">Draft</span>
<span class="State State--open mr-2">
<!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Open
</span>
<span class="State State--merged mr-2">
<!-- <%= octicon "git-merge" %> -->
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
Merged
</span>
<span class="State State--closed mr-2" title="Status: closed">
<!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Closed
</span>
```
### Small states
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
```html live
<span class="State State--small mr-2">Default</span>
<span class="State State--small State--open mr-2">
<!-- <%= octicon "issue-opened" %> -->
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
Open
</span>
<span class="State State--small State--closed mr-2">
<!-- <%= octicon "issue-closed" %> -->
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
Closed
</span>
```

1
docs/content/components/subhead.md
View File

@ -4,6 +4,7 @@ path: components/subhead
status: Stable
status_issue: 'https://github.com/github/design-systems/issues/101'
source: 'https://github.com/primer/css/tree/main/src/subhead'
rails: 'https://primer.style/view-components/components/subhead'
bundle: subhead
---

59
docs/content/components/subnav.md Normal file
View File

@ -0,0 +1,59 @@
---
title: Sub navigation
path: components/subnav
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
bundle: navigation
---
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
```html live title="subnav"
<nav class="subnav" aria-label="Repository">
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
<a class="subnav-item" href="#url">Item 2</a>
<a class="subnav-item" href="#url">Item 3</a>
</nav>
```
You can have `subnav-search` in the subnav bar.
```html live
<div class="subnav">
<nav class="subnav-links" aria-label="Repository">
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
<a class="subnav-item" href="#url">Item 2</a>
<a class="subnav-item" href="#url">Item 3</a>
</nav>
<div class="subnav-search float-left">
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
</div>
</div>
```
You can also use a `subnav-search-context` to display search help in a select menu.
```html live
<div class="subnav">
<nav class="subnav-links">
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
<a class="subnav-item" href="#url">Item 2</a>
<a class="subnav-item" href="#url">Item 3</a>
</nav>
</div>
<div class="subnav">
<div class="float-left subnav-search-context">
<button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
Filters
<span class="dropdown-caret"></span>
</button>
</div>
<div class="subnav-search float-left">
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
</div>
</div>
```

92
docs/content/components/tabnav.md Normal file
View File

@ -0,0 +1,92 @@
---
title: Tabnav
path: components/tabnav
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
rails: 'https://primer.style/view-components/components/alpha/tabnav'
bundle: navigation
---
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
```html live title="tabnav"
<div class="tabnav">
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo tab</a>
<a class="tabnav-tab" href="#url">Bar tab</a>
</nav>
</div>
```
Tabs can also contain icons and counters.
```html live
<div class="tabnav">
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">
<!-- <%= octicon "comment-discussion" %> -->
<svg class="octicon octicon-comment-discussion" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.75C1.5 2.6837 1.52634 2.62011 1.57322 2.57322C1.62011 2.52634 1.6837 2.5 1.75 2.5H10.25C10.3163 2.5 10.3799 2.52634 10.4268 2.57322C10.4737 2.62011 10.5 2.6837 10.5 2.75V8.25C10.5 8.3163 10.4737 8.37989 10.4268 8.42678C10.3799 8.47366 10.3163 8.5 10.25 8.5H6.75C6.55115 8.50017 6.36052 8.57931 6.22 8.72L3.5 11.44V9.25C3.5 9.05109 3.42098 8.86032 3.28033 8.71967C3.13968 8.57902 2.94891 8.5 2.75 8.5H1.75C1.6837 8.5 1.62011 8.47366 1.57322 8.42678C1.52634 8.37989 1.5 8.3163 1.5 8.25V2.75ZM1.75 1C1.28587 1 0.840752 1.18437 0.512563 1.51256C0.184374 1.84075 0 2.28587 0 2.75L0 8.25C0 9.216 0.784 10 1.75 10H2V11.543C2.0001 11.8311 2.08561 12.1127 2.24571 12.3522C2.40581 12.5917 2.63333 12.7784 2.8995 12.8886C3.16567 12.9988 3.45854 13.0277 3.74111 12.9715C4.02367 12.9153 4.28324 12.7767 4.487 12.573L7.061 10H10.25C10.7141 10 11.1592 9.81563 11.4874 9.48744C11.8156 9.15925 12 8.71413 12 8.25V2.75C12 2.28587 11.8156 1.84075 11.4874 1.51256C11.1592 1.18437 10.7141 1 10.25 1H1.75ZM14.5 4.75C14.5 4.6837 14.4737 4.62011 14.4268 4.57322C14.3799 4.52634 14.3163 4.5 14.25 4.5H13.75C13.5511 4.5 13.3603 4.42098 13.2197 4.28033C13.079 4.13968 13 3.94891 13 3.75C13 3.55109 13.079 3.36032 13.2197 3.21967C13.3603 3.07902 13.5511 3 13.75 3H14.25C15.216 3 16 3.784 16 4.75V10.25C16 10.7141 15.8156 11.1592 15.4874 11.4874C15.1592 11.8156 14.7141 12 14.25 12H14V13.543C13.9999 13.8311 13.9144 14.1127 13.7543 14.3522C13.5942 14.5917 13.3667 14.7784 13.1005 14.8886C12.8343 14.9988 12.5415 15.0277 12.2589 14.9715C11.9763 14.9153 11.7168 14.7767 11.513 14.573L9.22 12.28C9.14631 12.2113 9.08721 12.1285 9.04622 12.0365C9.00523 11.9445 8.98318 11.8452 8.98141 11.7445C8.97963 11.6438 8.99816 11.5438 9.03588 11.4504C9.0736 11.357 9.12974 11.2722 9.20096 11.201C9.27218 11.1297 9.35701 11.0736 9.4504 11.0359C9.54379 10.9982 9.64382 10.9796 9.74452 10.9814C9.84523 10.9832 9.94454 11.0052 10.0365 11.0462C10.1285 11.0872 10.2113 11.1463 10.28 11.22L12.5 13.44V11.25C12.5 11.0511 12.579 10.8603 12.7197 10.7197C12.8603 10.579 13.0511 10.5 13.25 10.5H14.25C14.3163 10.5 14.3799 10.4737 14.4268 10.4268C14.4737 10.3799 14.5 10.3163 14.5 10.25V4.75Z"></path></svg>
<span>Conversation</span>
<span class="Counter">2</span>
</a>
<a class="tabnav-tab" href="#url">
<!-- <%= octicon "git-commit" %> -->
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 7.75C10.5 8.41305 10.2366 9.04893 9.76777 9.51777C9.29893 9.98661 8.66304 10.25 8 10.25C7.33696 10.25 6.70107 9.98661 6.23223 9.51777C5.76339 9.04893 5.5 8.41305 5.5 7.75C5.5 7.08696 5.76339 6.45108 6.23223 5.98224C6.70107 5.5134 7.33696 5.25 8 5.25C8.66304 5.25 9.29893 5.5134 9.76777 5.98224C10.2366 6.45108 10.5 7.08696 10.5 7.75ZM11.93 8.5C11.7554 9.41441 11.2674 10.2393 10.5501 10.8327C9.83272 11.426 8.93093 11.7506 8 11.7506C7.06907 11.7506 6.16728 11.426 5.44994 10.8327C4.73259 10.2393 4.2446 9.41441 4.07 8.5H0.75C0.551088 8.5 0.360322 8.42099 0.21967 8.28033C0.0790176 8.13968 0 7.94892 0 7.75C0 7.55109 0.0790176 7.36033 0.21967 7.21967C0.360322 7.07902 0.551088 7 0.75 7H4.07C4.2446 6.0856 4.73259 5.26069 5.44994 4.66736C6.16728 4.07403 7.06907 3.7494 8 3.7494C8.93093 3.7494 9.83272 4.07403 10.5501 4.66736C11.2674 5.26069 11.7554 6.0856 11.93 7H15.25C15.4489 7 15.6397 7.07902 15.7803 7.21967C15.921 7.36033 16 7.55109 16 7.75C16 7.94892 15.921 8.13968 15.7803 8.28033C15.6397 8.42099 15.4489 8.5 15.25 8.5H11.93Z"></path></svg>
<span>Commits</span>
<span class="Counter">3</span>
</a>
<a class="tabnav-tab" href="#url">
<!-- <%= octicon "checklist" %> -->
<svg class="octicon octicon-checklist" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.75C2.5 1.61193 2.61193 1.5 2.75 1.5H11.25C11.3881 1.5 11.5 1.61193 11.5 1.75V9.48645C11.5 9.90067 11.8358 10.2365 12.25 10.2365C12.6642 10.2365 13 9.90067 13 9.48645V1.75C13 0.783502 12.2165 0 11.25 0H2.75C1.7835 0 1 0.783502 1 1.75V13.25C1 14.2165 1.7835 15 2.75 15H5.92083C6.33504 15 6.67083 14.6642 6.67083 14.25C6.67083 13.8358 6.33504 13.5 5.92083 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25V1.75ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H9.25C9.66421 5.5 10 5.16421 10 4.75C10 4.33579 9.66421 4 9.25 4H4.75ZM4 7.75C4 7.33579 4.33579 7 4.75 7H6.75C7.16421 7 7.5 7.33579 7.5 7.75C7.5 8.16421 7.16421 8.5 6.75 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75ZM15.774 11.2866C16.0703 10.9972 16.076 10.5223 15.7866 10.226C15.4972 9.92965 15.0223 9.92402 14.726 10.2134L10.7003 14.1447L9.28127 12.7206C8.98889 12.4272 8.51402 12.4264 8.22061 12.7187C7.9272 13.0111 7.92636 13.486 8.21873 13.7794L10.1618 15.7294C10.4521 16.0207 10.9229 16.0239 11.2171 15.7366L15.774 11.2866Z"></path></svg>
<span>Checks</span>
<span class="Counter">27</span>
</a>
<a class="tabnav-tab" href="#url">
<!-- <%= octicon "diff" %> -->
<svg class="octicon octicon-diff" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 1.5C2.61193 1.5 2.5 1.61193 2.5 1.75V14.25C2.5 14.3881 2.61193 14.5 2.75 14.5H13.25C13.3881 14.5 13.5 14.3881 13.5 14.25V4.66421C13.5 4.59791 13.4737 4.53432 13.4268 4.48744L10.5126 1.57322C10.4657 1.52634 10.4021 1.5 10.3358 1.5H2.75ZM1 1.75C1 0.783502 1.7835 0 2.75 0H10.3358C10.7999 0 11.245 0.184374 11.5732 0.512563L14.4874 3.42678C14.8156 3.75497 15 4.20008 15 4.66421V14.25C15 15.2165 14.2165 16 13.25 16H2.75C1.7835 16 1 15.2165 1 14.25V1.75ZM8 3.25C8.41421 3.25 8.75 3.58579 8.75 4V5.5H10.25C10.6642 5.5 11 5.83579 11 6.25C11 6.66421 10.6642 7 10.25 7H8.75V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V7H5.75C5.33579 7 5 6.66421 5 6.25C5 5.83579 5.33579 5.5 5.75 5.5H7.25V4C7.25 3.58579 7.58579 3.25 8 3.25ZM5 11.25C5 10.8358 5.33579 10.5 5.75 10.5H10.25C10.6642 10.5 11 10.8358 11 11.25C11 11.6642 10.6642 12 10.25 12H5.75C5.33579 12 5 11.6642 5 11.25Z"></path></svg>
<span>Files changed</span>
<span class="Counter">6</span>
</a>
</nav>
</div>
```
Use `.float-right` to align additional elements in the `.tabnav`:
```html live title="tabnav with buttons"
<div class="tabnav">
<a class="btn btn-sm float-right" href="#url" role="button">Button</a>
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
<a class="tabnav-tab" href="#url">Bar Tab</a>
</nav>
</div>
```
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
```html live title="tabnav-extra"
<div class="tabnav">
<div class="tabnav-extra float-right">Tabnav widget text here.</div>
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
<a class="tabnav-tab" href="#url">Bar Tab</a>
</nav>
</div>
```
```html live title="tabnav with everything"
<div class="tabnav">
<div class="float-right">
<a class="tabnav-extra" href="#url">Tabnav extra link</a>
<a class="tabnav-extra" href="#url">Tabnav extra link</a>
</div>
<nav class="tabnav-tabs" aria-label="Foo bar">
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
<a class="tabnav-tab" href="#url">Bar Tab</a>
</nav>
</div>
```

1
docs/content/components/timeline.md
View File

@ -4,6 +4,7 @@ path: components/timeline
status: Alpha
status_issue: 'https://github.com/github/design-systems/issues/101'
source: 'https://github.com/primer/css/tree/main/src/timeline'
rails: 'https://primer.style/view-components/components/timelineitem'
bundle: timeline
---

1
docs/content/components/tooltips.md
View File

@ -3,6 +3,7 @@ title: Tooltips
path: components/tooltips
status: Deprecated
source: 'https://github.com/primer/css/tree/main/src/tooltips'
rails: 'https://primer.style/view-components/components/alpha/tooltip'
bundle: tooltips
---

1
docs/content/components/truncate.md
View File

@ -3,6 +3,7 @@ title: Truncate
path: components/truncate
status: Alpha
source: 'https://github.com/primer/css/tree/main/src/truncate'
rails: 'https://primer.style/view-components/components/beta/truncate'
bundle: truncate
---

121
docs/content/components/underline-nav.md Normal file
View File

@ -0,0 +1,121 @@
---
title: UnderlineNav
path: components/underline-nav
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
rails: 'https://primer.style/view-components/components/alpha/underlinenav'
bundle: navigation
---
Use `.UnderlineNav` to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
To add a selected state to an item, use:
- `role="tab"` and `aria-selected="true"` if it's a button
- `aria-current="page"` if it's a link
```html live title="UnderlineNav"
<nav class="UnderlineNav">
<div class="UnderlineNav-body" role="tablist">
<button class="UnderlineNav-item" role="tab" type="button" aria-selected="true">Item 1</button>
<button class="UnderlineNav-item" role="tab" type="button">Item 2</button>
<button class="UnderlineNav-item" role="tab" type="button">Item 3</button>
<button class="UnderlineNav-item" role="tab" type="button">Item 4</button>
</div>
</nav>
```
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
```html live title="UnderlineNav-actions"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn btn-sm">Button</a>
</div>
</nav>
```
Use `.UnderlineNav--right` to right align the navigation.
```html live title="UnderlineNav--right"
<nav class="UnderlineNav UnderlineNav--right">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
</nav>
```
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
```html live title="UnderlineNav--right with actions"
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
<div class="UnderlineNav-actions">
<a class="btn btn-sm">Button</a>
</div>
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
</nav>
```
<!-- Update wording here -->
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
```html live
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 1</span>
</a>
<a class="UnderlineNav-item" href="#url">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 2</span>
<span class="Counter">10</span>
</a>
<a class="UnderlineNav-item" href="#url">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 3</span>
</a>
<a class="UnderlineNav-item" href="#url">
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
<span>Item 4</span>
</a>
</div>
</nav>
```
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
```html live title="UnderlineNav--full"
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
<div class="container-lg UnderlineNav-container">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2<span class="Counter">10</span></a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn btn-sm">Button</a>
</div>
</div>
</nav>
```

20
docs/src/@primer/gatsby-theme-doctocat/nav.yml
View File

@ -55,6 +55,8 @@
url: /components/alerts
- title: Avatars
url: /components/avatars
- title: AvatarStack
url: /components/avatar-stack
- title: Blankslate
url: /components/blankslate
- title: Box overlay
@ -67,8 +69,14 @@
url: /components/breadcrumb
- title: Buttons
url: /components/buttons
- title: ButtonGroup
url: /components/button-group
- title: Counter
url: /components/counter
- title: Dropdown
url: /components/dropdown
- title: Filter list
url: /components/filter-list
- title: Forms
url: /components/forms
- title: Header
@ -83,6 +91,8 @@
url: /components/loaders
- title: Markdown
url: /components/markdown
- title: Menu
url: /components/menu
- title: Navigation
url: /components/navigation
- title: Pagination
@ -93,8 +103,16 @@
url: /components/progress
- title: Select menu
url: /components/select-menu
- title: Side nav
url: /components/side-nav
- title: State
url: /components/state
- title: Subhead
url: /components/subhead
- title: Subnav
url: /components/subnav
- title: Tabnav
url: /components/tabnav
- title: Timeline
url: /components/timeline
- title: Toasts
@ -103,6 +121,8 @@
url: /components/tooltips
- title: Truncate
url: /components/truncate
- title: UnderlineNav
url: /components/underline-nav
- title: Marketing
url: /marketing
children: