Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Feature Request]: Allow React component for SideNavigation & TopNavigation Links

Aperta
  • Qualcosa non va?
#126 9 commenti 4 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start by reading the SideNavigation and TopNavigation APIs and how they currently render links; the issue names no files or tests. Review the discussion for any decision on how a custom React component should fit those APIs. Done means both navigation components can support the requested custom link component while retaining their existing link options.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement
Description

Hi,

I'm using Gatsby and it work pretty well, my only concern is that Gatsby has the component Link which is super optimized for users

The component drives a powerful performance feature called preloading. Preloading is used to prefetch page resources so that the resources are available by the time the user navigates to the page.

We use the browser’s Intersection Observer API to observe when a component enters the user viewport and then start a low-priority request for the linked page’s resources. Then when a user moves their mouse over a link and the onMouseOver event is triggered, we upgrade the fetches to high-priority.

I can feel the speed difference by using it or not.
Is it possible to add an option to define a react component directly for the link ?

Something like:

<SideNavigation
      items={[
        {
          type: "section",
          text: "Collections",
          items: [
            {
              type: "cmp",
              value: <Link href="/page2"></Link>,
            },
            {
              type: "link",
              text: "Test",
              href: "/test",
            },
          ],
        },
...


<TopNavigation
      identity={{
        href: "/",
        cmp: <Link href="/page3"></Link>,
      }}
...

Or is there a way to do it already?

Code of Conduct
Lingua principale
TypeScript
Stelle
2.7k
Fork
248
Merge medio
3g 14h
PR unite (30g)
83

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

Tutte le issue di cloudscape-design/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.