[QUESTION] Server side render dropdown menu items?

[hugotox]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Hello!

I'm using a dropdown menu to show a couple of navigation links, and I'm wondering if it's possible to render them to the DOM during server side render, so they can be crawled by search engine bots?

If that's not possible with dropdown menu, what's an alternative? (I'd love to still use shadcn styles)

What type of pull request would this be?

None

Provide relevant links or additional information.

Example structure I'm using:

<DropdownMenu>
  <DropdownMenuTrigger asChild let:builder>
    <Button
      builders={[builder]}
      aria-label="open side menu"
      class="absolute left-1 top-2 h-10 w-10 p-0 focus-visible:ring-0 md:focus-visible:ring-2"
      variant="ghost"
    >
      <Menu size={22} />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuItem class="py-2 text-base" on:click={() => goto('/how-it-works')}>
      <a href="/how-it-works" tabindex="-1">How it works</a>
    </DropdownMenuItem>
    <DropdownMenuItem class="py-2 text-base" on:click={() => goto('/legal')}>
      <a href="/legal" tabindex="-1">Legal</a>
    </DropdownMenuItem>
    <DropdownMenuItem class="py-2 text-base" on:click={() => goto('/contact')}>
      <a href="/contact" tabindex="-1">Contact</a>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

[mehdikhody]

You can still include those URLs in your sitemap or using display: none or any other CSS technique to hide content on a page will generally not prevent search engines from indexing that content.

you can use the following code in your svelte component:

<ul style="display: none;">
  <li><a href="/how-it-works">How it works</a></li>
  <li><a href="/legal">Legal</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

[hugotox]

Yes, thank you! That fixes the problem manually, I'm doing that right now. Just wondering if there was a shadcn native way to do this so I don't have to duplicate the links

[danpii]

Hi, I am facing the same issue. Did you find another clean shadcn solution?
The shadcn-ui Navigation Menu (https://ui.shadcn.com/docs/components/navigation-menu) uses lists that are crawlable.
@huntabyte any plans when the Navigation Menu will be integrated?

[hugotox]

No, I could not find another way other than duplicating the links in a hidden div