Building blocks for content-driven sites.

src/pages/blocks/navigation-headers/navbar-1.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3
import { Button } from "@bejamas/ui/components/button";
4
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
5
import {
6
  DropdownMenu,
7
  DropdownMenuTrigger,
8
  DropdownMenuContent,
9
  DropdownMenuItem,
10
  DropdownMenuGroup,
11
  DropdownMenuLabel,
12
  DropdownMenuSeparator,
13
  DropdownMenuShortcut,
14
} from "@bejamas/ui/components/dropdown-menu";
15
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
16
---
17

18
<BlockExampleLayout>
19
  <div class="bg-muted min-h-[1500px]">
20
    <StickySurface
21
      threshold="1rem"
22
      observeStuck
23
      class="top-5 [&.is-stuck]:shadow-sm [&.is-stuck]:max-w-2xl max-w-5xl rounded-2xl h-16 mx-auto"
24
      effects={["elevate"]}
25
      style="--stuck-shadow: var(--shadow-sm)"
26
    >
27
      <NavigationMenu
28
        class="rounded-2xl bg-transparent group-[.is-stuck]/surface:bg-white/40 h-16 backdrop-blur-sm mx-auto transition-all duration-200 ease-out"
29
      >
30
        <div slot="logo" class="flex items-center h-full">
31
          <img
32
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
33
            alt="Acme, Inc."
34
            class="h-7"
35
          />
36
        </div>
37
        <ul slot="links" class="flex items-center space-x-2">
38
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
39
          <li>
40
            <DropdownMenu>
41
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
42
              <DropdownMenuContent class="grid grid-cols-12 gap-2 w-120">
43
                <ul class="col-span-5">
44
                  <li>
45
                    <a
46
                      href="#"
47
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
48
                    >
49
                      <p class="font-medium">About</p>
50
                      <div class="text-muted-foreground text-sm">
51
                        Read more about our company
52
                      </div>
53
                    </a>
54
                  </li>
55
                  <li>
56
                    <a
57
                      href="#"
58
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
59
                    >
60
                      <p class="font-medium w-full">Team</p>
61
                      <div class="text-muted-foreground text-sm">
62
                        Meet our heroes
63
                      </div>
64
                    </a>
65
                  </li>
66
                  <li>
67
                    <a
68
                      href="#"
69
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
70
                    >
71
                      <p class="font-medium w-full">Blog</p>
72
                      <div class="text-muted-foreground text-sm">
73
                        Read our latest news
74
                      </div>
75
                    </a>
76
                  </li>
77
                  <li>
78
                    <a
79
                      href="#"
80
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
81
                    >
82
                      <p class="font-medium w-full">Careers</p>
83
                      <div class="text-muted-foreground text-sm">
84
                        Join our team
85
                      </div>
86
                    </a>
87
                  </li>
88
                </ul>
89
                <div
90
                  class="bg-accent p-4 rounded-lg flex items-end relative col-span-7"
91
                >
92
                  <p class="font-medium relative z-10 text-white">Company</p>
93
                  <img
94
                    src="https://plus.unsplash.com/premium_photo-1755155931545-87b694f49769?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
95
                    class="w-full h-full object-cover absolute top-0 left-0 rounded-lg"
96
                  />
97
                </div>
98
              </DropdownMenuContent>
99
            </DropdownMenu>
100
          </li>
101
          <li>
102
            <Button as="a" href="#" variant="ghost">Contact</Button>
103
          </li>
104
        </ul>
105
        <div slot="actions" class="flex items-center gap-2">
106
          <Button
107
            variant="outline"
108
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
109
            >Log in</Button
110
          >
111
          <Button
112
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
113
          >
114
            <span
115
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
116
              >Contact</span
117
            >
118
            <span
119
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
120
              >Get a demo</span
121
            >
122
          </Button>
123
        </div>
124
      </NavigationMenu>
125
    </StickySurface>
126
  </div>
127
</BlockExampleLayout>

src/pages/blocks/navigation-headers/navbar-2.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3

4
import { Button } from "@bejamas/ui/components/button";
5
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
6
import {
7
  DropdownMenu,
8
  DropdownMenuTrigger,
9
  DropdownMenuContent,
10
  DropdownMenuItem,
11
  DropdownMenuGroup,
12
  DropdownMenuLabel,
13
  DropdownMenuSeparator,
14
  DropdownMenuShortcut,
15
} from "@bejamas/ui/components/dropdown-menu";
16
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
17
---
18

19
<BlockExampleLayout>
20
  <div class="bg-muted min-h-[1500px]">
21
    <div class="bg-muted text-muted-foreground p-4 w-full text-center">
22
      New release available! See the <a
23
        href="#"
24
        class="text-primary">changelog</a
25
      > for more details.
26
    </div>
27
    <StickySurface effects={["line"]} threshold="1rem" observeStuck>
28
      <NavigationMenu>
29
        <div slot="logo" class="flex items-center h-full">
30
          <img
31
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
32
            alt="Acme, Inc."
33
            class="h-8"
34
          />
35
        </div>
36
        <ul slot="links" class="flex items-center space-x-2">
37
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
38
          <li>
39
            <DropdownMenu>
40
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
41
              <DropdownMenuContent>
42
                <ul>
43
                  <li>
44
                    <Button
45
                      href="#"
46
                      as="a"
47
                      variant="ghost"
48
                      class="w-full justify-start">About</Button
49
                    >
50
                  </li>
51
                  <li>
52
                    <Button
53
                      href="#"
54
                      as="a"
55
                      variant="ghost"
56
                      class="w-full justify-start">Team</Button
57
                    >
58
                  </li>
59
                  <li>
60
                    <Button
61
                      href="#"
62
                      as="a"
63
                      variant="ghost"
64
                      class="w-full justify-start">Blog</Button
65
                    >
66
                  </li>
67
                  <li>
68
                    <Button
69
                      href="#"
70
                      as="a"
71
                      variant="ghost"
72
                      class="w-full justify-start">Careers</Button
73
                    >
74
                  </li>
75
                </ul>
76
              </DropdownMenuContent>
77
            </DropdownMenu>
78
          </li>
79
          <li>
80
            <Button as="a" href="#" variant="ghost">Contact</Button>
81
          </li>
82
        </ul>
83
        <div slot="actions" class="flex items-center gap-2">
84
          <Button
85
            variant="outline"
86
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
87
            >Log in</Button
88
          >
89
          <Button
90
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
91
          >
92
            <span
93
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
94
              >Contact</span
95
            >
96
            <span
97
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
98
              >Get a demo</span
99
            >
100
          </Button>
101
        </div>
102
      </NavigationMenu>
103
    </StickySurface>
104
  </div>
105
</BlockExampleLayout>

src/pages/blocks/navigation-headers/navbar-1.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3
import { Button } from "@bejamas/ui/components/button";
4
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
5
import {
6
  DropdownMenu,
7
  DropdownMenuTrigger,
8
  DropdownMenuContent,
9
  DropdownMenuItem,
10
  DropdownMenuGroup,
11
  DropdownMenuLabel,
12
  DropdownMenuSeparator,
13
  DropdownMenuShortcut,
14
} from "@bejamas/ui/components/dropdown-menu";
15
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
16
---
17

18
<BlockExampleLayout>
19
  <div class="bg-muted min-h-[1500px]">
20
    <StickySurface
21
      threshold="1rem"
22
      observeStuck
23
      class="top-5 [&.is-stuck]:shadow-sm [&.is-stuck]:max-w-2xl max-w-5xl rounded-2xl h-16 mx-auto"
24
      effects={["elevate"]}
25
      style="--stuck-shadow: var(--shadow-sm)"
26
    >
27
      <NavigationMenu
28
        class="rounded-2xl bg-transparent group-[.is-stuck]/surface:bg-white/40 h-16 backdrop-blur-sm mx-auto transition-all duration-200 ease-out"
29
      >
30
        <div slot="logo" class="flex items-center h-full">
31
          <img
32
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
33
            alt="Acme, Inc."
34
            class="h-7"
35
          />
36
        </div>
37
        <ul slot="links" class="flex items-center space-x-2">
38
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
39
          <li>
40
            <DropdownMenu>
41
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
42
              <DropdownMenuContent class="grid grid-cols-12 gap-2 w-120">
43
                <ul class="col-span-5">
44
                  <li>
45
                    <a
46
                      href="#"
47
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
48
                    >
49
                      <p class="font-medium">About</p>
50
                      <div class="text-muted-foreground text-sm">
51
                        Read more about our company
52
                      </div>
53
                    </a>
54
                  </li>
55
                  <li>
56
                    <a
57
                      href="#"
58
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
59
                    >
60
                      <p class="font-medium w-full">Team</p>
61
                      <div class="text-muted-foreground text-sm">
62
                        Meet our heroes
63
                      </div>
64
                    </a>
65
                  </li>
66
                  <li>
67
                    <a
68
                      href="#"
69
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
70
                    >
71
                      <p class="font-medium w-full">Blog</p>
72
                      <div class="text-muted-foreground text-sm">
73
                        Read our latest news
74
                      </div>
75
                    </a>
76
                  </li>
77
                  <li>
78
                    <a
79
                      href="#"
80
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
81
                    >
82
                      <p class="font-medium w-full">Careers</p>
83
                      <div class="text-muted-foreground text-sm">
84
                        Join our team
85
                      </div>
86
                    </a>
87
                  </li>
88
                </ul>
89
                <div
90
                  class="bg-accent p-4 rounded-lg flex items-end relative col-span-7"
91
                >
92
                  <p class="font-medium relative z-10 text-white">Company</p>
93
                  <img
94
                    src="https://plus.unsplash.com/premium_photo-1755155931545-87b694f49769?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
95
                    class="w-full h-full object-cover absolute top-0 left-0 rounded-lg"
96
                  />
97
                </div>
98
              </DropdownMenuContent>
99
            </DropdownMenu>
100
          </li>
101
          <li>
102
            <Button as="a" href="#" variant="ghost">Contact</Button>
103
          </li>
104
        </ul>
105
        <div slot="actions" class="flex items-center gap-2">
106
          <Button
107
            variant="outline"
108
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
109
            >Log in</Button
110
          >
111
          <Button
112
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
113
          >
114
            <span
115
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
116
              >Contact</span
117
            >
118
            <span
119
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
120
              >Get a demo</span
121
            >
122
          </Button>
123
        </div>
124
      </NavigationMenu>
125
    </StickySurface>
126
  </div>
127
</BlockExampleLayout>

src/pages/blocks/navigation-headers/navbar-2.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3

4
import { Button } from "@bejamas/ui/components/button";
5
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
6
import {
7
  DropdownMenu,
8
  DropdownMenuTrigger,
9
  DropdownMenuContent,
10
  DropdownMenuItem,
11
  DropdownMenuGroup,
12
  DropdownMenuLabel,
13
  DropdownMenuSeparator,
14
  DropdownMenuShortcut,
15
} from "@bejamas/ui/components/dropdown-menu";
16
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
17
---
18

19
<BlockExampleLayout>
20
  <div class="bg-muted min-h-[1500px]">
21
    <div class="bg-muted text-muted-foreground p-4 w-full text-center">
22
      New release available! See the <a
23
        href="#"
24
        class="text-primary">changelog</a
25
      > for more details.
26
    </div>
27
    <StickySurface effects={["line"]} threshold="1rem" observeStuck>
28
      <NavigationMenu>
29
        <div slot="logo" class="flex items-center h-full">
30
          <img
31
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
32
            alt="Acme, Inc."
33
            class="h-8"
34
          />
35
        </div>
36
        <ul slot="links" class="flex items-center space-x-2">
37
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
38
          <li>
39
            <DropdownMenu>
40
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
41
              <DropdownMenuContent>
42
                <ul>
43
                  <li>
44
                    <Button
45
                      href="#"
46
                      as="a"
47
                      variant="ghost"
48
                      class="w-full justify-start">About</Button
49
                    >
50
                  </li>
51
                  <li>
52
                    <Button
53
                      href="#"
54
                      as="a"
55
                      variant="ghost"
56
                      class="w-full justify-start">Team</Button
57
                    >
58
                  </li>
59
                  <li>
60
                    <Button
61
                      href="#"
62
                      as="a"
63
                      variant="ghost"
64
                      class="w-full justify-start">Blog</Button
65
                    >
66
                  </li>
67
                  <li>
68
                    <Button
69
                      href="#"
70
                      as="a"
71
                      variant="ghost"
72
                      class="w-full justify-start">Careers</Button
73
                    >
74
                  </li>
75
                </ul>
76
              </DropdownMenuContent>
77
            </DropdownMenu>
78
          </li>
79
          <li>
80
            <Button as="a" href="#" variant="ghost">Contact</Button>
81
          </li>
82
        </ul>
83
        <div slot="actions" class="flex items-center gap-2">
84
          <Button
85
            variant="outline"
86
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
87
            >Log in</Button
88
          >
89
          <Button
90
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
91
          >
92
            <span
93
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
94
              >Contact</span
95
            >
96
            <span
97
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
98
              >Get a demo</span
99
            >
100
          </Button>
101
        </div>
102
      </NavigationMenu>
103
    </StickySurface>
104
  </div>
105
</BlockExampleLayout>