Primer ViewComponents v0.44.1

Previews

No matching results.

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
120
121
122
123
124
/* menu */
/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
.menu {
  /* stylelint-disable-next-line primer/spacing */
  margin-bottom: var(--stack-gap-normal);
  list-style: none;
  background-color: var(--bgColor-default);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
}
.menu-item {
  position: relative;
  display: block;
  /* stylelint-disable-next-line primer/spacing */
  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
  color: var(--fgColor-default);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
}
.menu-item:first-child {
    border-top: 0;
    border-top-left-radius: var(--borderRadius-medium);
    border-top-right-radius: var(--borderRadius-medium);
  }
.menu-item:first-child::before {
      border-top-left-radius: var(--borderRadius-medium);
    }
.menu-item:last-child {
    border-bottom: 0;
    border-bottom-right-radius: var(--borderRadius-medium);
    border-bottom-left-radius: var(--borderRadius-medium);
  }
.menu-item:last-child::before {
      border-bottom-left-radius: var(--borderRadius-medium);
    }
.menu-item:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--bgColor-neutral-muted);
  }
.menu-item:active {
    background-color: var(--bgColor-muted);
  }
.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']) {
    cursor: default;
    background-color: var(--menu-bgColor-active);
  }
:is(.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']))::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      content: '';
      /* stylelint-disable-next-line primer/colors */
      background-color: var(--underlineNav-borderColor-active);
    }
.menu-item .octicon {
    width: 16px;
    /* stylelint-disable-next-line primer/spacing */
    margin-right: var(--control-medium-gap);
    color: var(--fgColor-muted);
    text-align: center;
  }
.menu-item .Counter {
    float: right;
    /* stylelint-disable-next-line primer/spacing */
    margin-left: var(--control-small-gap);
  }
.menu-item .menu-warning {
    float: right;
    color: var(--fgColor-attention);
  }
.menu-item .avatar {
    float: left;
    /* stylelint-disable-next-line primer/spacing */
    margin-right: var(--control-small-gap);
  }
.menu-item.alert .Counter {
      color: var(--fgColor-danger);
    }
.menu-heading {
  display: block;
  /* stylelint-disable-next-line primer/spacing */
  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: var(--base-text-weight-semibold);
  color: var(--fgColor-default);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
}
.menu-heading:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.menu-heading:first-child {
    border-top-left-radius: var(--borderRadius-medium);
    border-top-right-radius: var(--borderRadius-medium);
  }
.menu-heading:last-child {
    border-bottom: 0;
    border-bottom-right-radius: var(--borderRadius-medium);
    border-bottom-left-radius: var(--borderRadius-medium);
  }