x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav data-view-component="true" class="menu"> <h2 data-view-component="true" class="menu-heading"> Heading </h2> <a href="#url" aria-current="page" data-view-component="true" class="menu-item"> Item 1 </a> <a href="#url" data-view-component="true" class="menu-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> With Icon </a> <a href="#url" data-view-component="true" class="menu-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> With Icon and Counter <span title="25" data-view-component="true" class="Counter">25</span> </a></nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= render(Primer::Alpha::Menu.new) do |component| %> <% component.with_heading(tag: :h2) do %> Heading <% end %> <% component.with_item(selected: true, href: "#url") do %> Item 1 <% end %> <% component.with_item(href: "#url") do %> <%= render(Primer::Beta::Octicon.new("check")) %> With Icon <% end %> <% component.with_item(href: "#url") do %> <%= render(Primer::Beta::Octicon.new("check")) %> With Icon and Counter <%= render(Primer::Beta::Counter.new(count: 25)) %> <% end %><% end %>
No notes provided.
No params configured.
app/components/primer/alpha/menu.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
113
114
115
116
117
118
119
/* menu *//* A menu on the side of a page, defaults to left side. e.g. github.com/about */.menu { margin-bottom: var(--stack-gap-normal,1rem); list-style: none; background-color: var(--bgColor-default,var(--color-canvas-default)); border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default)); border-radius: var(--borderRadius-medium,0.375rem);}.menu-item { position: relative; display: block; padding: var(--control-medium-paddingInline-condensed,0.5rem) var(--control-medium-paddingInline-spacious,1rem); color: var(--fgColor-default,var(--color-fg-default)); border-bottom: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));}.menu-item:first-child { border-top: 0; border-top-left-radius: var(--borderRadius-medium,0.375rem); border-top-right-radius: var(--borderRadius-medium,0.375rem); }.menu-item:first-child::before { border-top-left-radius: var(--borderRadius-medium,0.375rem); }.menu-item:last-child { border-bottom: 0; border-bottom-right-radius: var(--borderRadius-medium,0.375rem); border-bottom-left-radius: var(--borderRadius-medium,0.375rem); }.menu-item:last-child::before { border-bottom-left-radius: var(--borderRadius-medium,0.375rem); }.menu-item:hover { -webkit-text-decoration: none; text-decoration: none; background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle)); }.menu-item:active { background-color: var(--bgColor-muted,var(--color-canvas-subtle)); }.menu-item.selected, .menu-item[aria-selected='true'], .menu-item[aria-current]:not([aria-current='false']) { cursor: default; background-color: var(--menu-bgColor-active,var(--color-menu-bg-active)); }.menu-item.selected::before, .menu-item[aria-selected='true']::before, .menu-item[aria-current]:not([aria-current='false'])::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ''; background-color: var(--underlineNav-borderColor-active,var(--color-primer-border-active)); }.menu-item .octicon { width: 16px; margin-right: var(--control-medium-gap,0.5rem); color: var(--fgColor-muted,var(--color-fg-muted)); text-align: center; }.menu-item .Counter { float: right; margin-left: var(--control-small-gap,0.25rem); }.menu-item .menu-warning { float: right; color: var(--fgColor-attention,var(--color-attention-fg)); }.menu-item .avatar { float: left; margin-right: var(--control-small-gap,0.25rem); }.menu-item.alert .Counter { color: var(--fgColor-danger,var(--color-danger-fg)); }.menu-heading { display: block; padding: var(--control-medium-paddingInline-condensed,0.5rem) var(--control-medium-paddingInline-spacious,1rem); margin-top: 0; margin-bottom: 0; font-size: inherit; font-weight: var(--base-text-weight-semibold,600); color: var(--fgColor-default,var(--color-fg-default)); border-bottom: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));}.menu-heading:hover { -webkit-text-decoration: none; text-decoration: none; }.menu-heading:first-child { border-top-left-radius: var(--borderRadius-medium,0.375rem); border-top-right-radius: var(--borderRadius-medium,0.375rem); }.menu-heading:last-child { border-bottom: 0; border-bottom-right-radius: var(--borderRadius-medium,0.375rem); border-bottom-left-radius: var(--borderRadius-medium,0.375rem); }