x
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
<div class="flex min-h-[28rem] justify-center pt-8"><nav id="ui-navigation-menu-344ab29c" aria-label="Main" class="relative" data-controller="ui--navigation-menu" data-ui--navigation-menu-open-delay-value="150" data-ui--navigation-menu-close-delay-value="200" data-action="focusin->ui--navigation-menu#focusIn focusout->ui--navigation-menu#focusOut"> <ul class="flex flex-wrap items-center gap-1"> <li class="relative"> <button type="button" id="ui-navigation-menu-344ab29c-trigger-1" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" aria-expanded="false" aria-controls="ui-navigation-menu-344ab29c-panel-1" data-ui--navigation-menu-target="top trigger" data-action="click->ui--navigation-menu#toggle pointerenter->ui--navigation-menu#hoverOpen pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#topKeydown">Company<i data-lucide="chevron-down" class="inline-block shrink-0 w-3 h-3 transition-transform duration-200 group-aria-expanded/nav-item:rotate-180 motion-reduce:transition-none" aria-hidden="true"></i> </button> <div id="ui-navigation-menu-344ab29c-panel-1" hidden="hidden" class="z-50 max-w-[calc(100vw-1rem)] rounded-lg border bg-popover p-2 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 w-[32rem]" data-ui--navigation-menu-target="panel" data-state="closed" data-action="pointerenter->ui--navigation-menu#cancelClose pointerleave->ui--navigation-menu#hoverClose keydown->ui--navigation-menu#panelKeydown"> <ul class="grid gap-1"> <li><a href="#about" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link"> <span class="min-w-0"> <span class="block font-medium leading-snug">About</span> <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Who we are and why we build this.</span> </span> </a></li> <li><a href="#careers" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link"> <span class="min-w-0"> <span class="block font-medium leading-snug">Careers</span> <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Open roles, remote-first.</span> </span> </a></li> <li><a href="#customers" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link"> <span class="min-w-0"> <span class="block font-medium leading-snug">Customers</span> <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Teams that run on Acme, in their words.</span> </span> </a></li> <li><a href="#contact" class="flex gap-3 rounded-md p-3 text-sm outline-none transition-colors items-start hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="link"> <span class="min-w-0"> <span class="block font-medium leading-snug">Contact</span> <span class="mt-1 line-clamp-2 block leading-snug text-muted-foreground">Sales, support and partnerships.</span> </span> </a></li> </ul> <div class="mt-2 flex items-center justify-between gap-4 rounded-md bg-muted p-4"> <div> <p class="text-sm font-medium">We're hiring</p> <p class="mt-1 text-sm text-muted-foreground">Three engineering roles are open this quarter.</p> </div> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false">See roles</button> </div> </div> </li> <li class="relative"> <a href="#blog" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="top" data-action="keydown->ui--navigation-menu#topKeydown">Blog</a> </li> <li class="relative"> <a href="#contact" class="group/nav-item inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 aria-expanded:bg-accent aria-expanded:text-accent-foreground data-[active]:bg-accent/60 aria-[current=page]:bg-accent/60" data-ui--navigation-menu-target="top" data-action="keydown->ui--navigation-menu#topKeydown">Contact</a> </li> </ul></nav></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%# Any markup can go in a panel alongside, or instead of, its links. %><div class="flex min-h-[28rem] justify-center pt-8"> <%= render(UI::NavigationMenu.new) do |nav| %> <% nav.with_item(label: "Company", panel_class: "w-[32rem]") do |item| %> <% item.with_link(title: "About", href: "#about", description: "Who we are and why we build this.") %> <% item.with_link(title: "Careers", href: "#careers", description: "Open roles, remote-first.") %> <% item.with_link(title: "Customers", href: "#customers", description: "Teams that run on Acme, in their words.") %> <% item.with_link(title: "Contact", href: "#contact", description: "Sales, support and partnerships.") %> <div class="mt-2 flex items-center justify-between gap-4 rounded-md bg-muted p-4"> <div> <p class="text-sm font-medium">We're hiring</p> <p class="mt-1 text-sm text-muted-foreground">Three engineering roles are open this quarter.</p> </div> <%= render(UI::Button.new(size: :sm, variant: :outline)) { "See roles" } %> </div> <% end %> <% nav.with_item(label: "Blog", href: "#blog") %> <% nav.with_item(label: "Contact", href: "#contact") %> <% end %></div>No notes provided.
No params configured.