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

Update docs

Browse Source
This commit is contained in:
Amanda Pinsker 2017-11-03 11:55:34 -07:00
parent 573b96172a
commit 921fef6eb9
1 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
modules/primer-navigation/README.md
View File

@ -108,7 +108,23 @@ You can also add optional headings to a menu. Feel free to use nearly any semant
</nav>
```
You can right align the navigation.
Use `.UnderlineNav-actions` to use another element alongside the underline nav
```html title="UnderlineNav-actions"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-items">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
<a href="#url" class="UnderlineNav-item">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn">Button</a>
</div>
</nav>
```
You can right align the navigation with `.UnderlineNav--right`.
```html title="UnderlineNav--right"
<nav class="UnderlineNav UnderlineNav--right">
@ -121,6 +137,22 @@ You can right align the navigation.
</nav>
```
This also works when adding actions.
```html title="UnderlineNav--right with actions"
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
<div class="UnderlineNav-actions">
<a class="btn">Button</a>
</div>
<div class="UnderlineNav-items">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
<a href="#url" class="UnderlineNav-item">Item 4</a>
</div>
</nav>
```
The navigation will work with added counters and/or octicons
@ -134,7 +166,7 @@ The navigation will work with added counters and/or octicons
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
Item 2
<span className="Counter">10</span>
<span class="Counter">10</span>
</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
@ -156,32 +188,21 @@ Use `.UnderlineNav--full` to use a container within the components
<div class="UnderlineNav-items">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2
<span className="Counter">10</span>
<span class="Counter">10</span>
</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
<a href="#url" class="UnderlineNav-item">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn">Button</a>
</div>
</div>
</nav>
```
Use `.UnderlineNav-actions` to use another element alongside the underline nav
```html title="UnderlineNav-actions"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-items">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2
<span class="Counter">10</span>
</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
<a href="#url" class="UnderlineNav-item">Item 4</a>
</div>
<div class="UnderlineNav-actions">
<a class="btn">Button</a>
</div>
</nav>
```
## Tabnav