300px
x
150px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav aria-label="With icons and counters" data-view-component="true" class="tabnav"> <ul data-view-component="true" class="tabnav-tabs"> <li data-view-component="true" class="d-inline-flex"> <a href="#" aria-current="page" data-view-component="true" class="tabnav-tab"> Tab 1 </a></li> <li data-view-component="true" class="d-inline-flex"> <a href="#" data-view-component="true" class="tabnav-tab"> Tab 2 </a></li> <li data-view-component="true" class="d-inline-flex"> <a href="#" data-view-component="true" class="tabnav-tab"> Tab 3 </a></li> </ul> <button type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Extra Button</span> </span> </button></nav>1
2
3
4
5
6
7
8
<%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %> <% component.with_tab(selected: true, href: "#") { "Tab 1" } %> <% component.with_tab(href: "#") { "Tab 2" } %> <% component.with_tab(href: "#") { "Tab 3" } %> <% component.with_extra(align: align) do %> <%= render(Primer::Beta::Button.new) { "Extra Button" } %> <% end %><% end %>No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
app/components/primer/alpha/tab_nav.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/* tabnav *//* Outer wrapper */.tabnav { margin-top: 0; /* stylelint-disable-next-line primer/spacing */ margin-bottom: var(--stack-gap-normal); border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);}.tabnav-tabs { display: flex; /* stylelint-disable-next-line primer/spacing */ margin-bottom: calc(var(--borderWidth-thin) * -1); overflow: hidden;}.tabnav-tab { display: inline-block; flex-shrink: 0; /* stylelint-disable-next-line primer/spacing */ padding: var(--base-size-8) var(--control-medium-paddingInline-spacious); font-size: var(--text-body-size-medium); /* stylelint-disable-next-line primer/typography */ line-height: 23px; color: var(--fgColor-muted); -webkit-text-decoration: none; text-decoration: none; background-color: transparent; border: var(--borderWidth-thin) solid transparent; border-bottom: 0; transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);}.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false']) { color: var(--fgColor-default); background-color: var(--bgColor-default); /* cover bottom border */ border-color: var(--borderColor-default); border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0; }:is(.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false'])) .octicon { color: inherit; }.tabnav-tab:hover { color: var(--fgColor-default); -webkit-text-decoration: none; text-decoration: none; transition-duration: 0.1s; }.tabnav-tab:focus,.tabnav-tab:focus-visible { border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important; outline-offset: -6px; }.tabnav-tab:active { color: var(--fgColor-muted); }.tabnav-tab .octicon { /* stylelint-disable-next-line primer/spacing */ margin-right: var(--control-small-gap); color: var(--fgColor-muted); }.tabnav-tab .Counter { /* stylelint-disable-next-line primer/spacing */ margin-left: var(--control-small-gap); color: inherit; }/* Tabnav extras**** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're** inline text or links. */.tabnav-extra { display: inline-block; /* stylelint-disable-next-line primer/spacing */ padding-top: 10px; /* stylelint-disable-next-line primer/spacing */ margin-left: 10px; font-size: var(--text-body-size-small); color: var(--fgColor-muted);}.tabnav-extra > .octicon { margin-right: var(--base-size-2); }/* When tabnav-extra are anchors *//* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */a.tabnav-extra:hover { color: var(--fgColor-accent); -webkit-text-decoration: none; text-decoration: none;}/* Tabnav buttons**** For when there are multiple buttons, space them out appropriately. Requires** the buttons to be floated or inline-block. */.tabnav-btn { /* stylelint-disable-next-line primer/spacing */ margin-left: var(--controlStack-medium-gap-condensed);}