GlobalNavigationMenu() — supabase Function Reference

Architecture documentation for the GlobalNavigationMenu() function in GlobalNavigationMenu.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ GlobalNavigationMenu() — supabase Function Reference

Dependency Diagram

graph TD
  3d3f13dc_0f46_0e7d_3205_788dc6fc2cc9["GlobalNavigationMenu()"]
  6b24c547_76b2_a6b3_c5ce_f64931f9696a["useActiveMenuLabel()"]
  3d3f13dc_0f46_0e7d_3205_788dc6fc2cc9 -->|calls| 6b24c547_76b2_a6b3_c5ce_f64931f9696a
  style 3d3f13dc_0f46_0e7d_3205_788dc6fc2cc9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx lines 59–158

const GlobalNavigationMenu: FC = () => {
  const activeLabel = useActiveMenuLabel(GLOBAL_MENU_ITEMS)
  const triggerClassName =
    'h-[var(--header-height)] p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:text-foreground data-[state=open]:!text-foreground data-[radix-collection-item]:focus-visible:ring-2 data-[radix-collection-item]:focus-visible:ring-foreground-lighter data-[radix-collection-item]:focus-visible:text-foreground h-full focus-visible:rounded !shadow-none outline-none transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600'

  return (
    <div className="flex relative gap-2 justify-start items-end w-full h-full">
      <NavigationMenu
        delayDuration={0}
        skipDelayDuration={0}
        className="w-full flex justify-start h-full"
        renderViewport={false}
        viewportClassName="mt-0 max-w-screen overflow-hidden border-0 rounded-none mt-1.5 rounded-md !border-x"
      >
        <NavigationMenuList className="px-6 space-x-2 h-[var(--header-height)]">
          {GLOBAL_MENU_ITEMS.filter((section) => section[0].enabled !== false).map(
            (section, sectionIdx) =>
              section[0].menuItems ? (
                <NavigationMenuItem
                  key={`desktop-docs-menu-section-${section[0].label}-${sectionIdx}`}
                  className="text-sm relative h-full"
                >
                  <NavigationMenuTrigger
                    className={cn(
                      navigationMenuTriggerStyle(),
                      triggerClassName,
                      activeLabel === section[0].label && 'text-foreground border-foreground'
                    )}
                  >
                    {section[0].label === 'Home' ? (
                      <MenuIconPicker icon={section[0].icon || ''} />
                    ) : (
                      section[0].label
                    )}
                  </NavigationMenuTrigger>
                  <NavigationMenuContent className="!top-[calc(100%+4px)] min-w-[14rem] max-h-[calc(100vh-4rem)] border-y w-screen md:w-64 overflow-hidden overflow-y-auto rounded-none md:rounded-md md:border border-overlay bg-overlay text-foreground-light shadow-md !duration-0">
                    <div className="p-3 md:p-1">
                      {section[0].menuItems?.map((menuItem, menuItemIndex) => (
                        <Fragment
                          key={`desktop-docs-menu-section-${menuItemIndex}-${menuItemIndex}`}
                        >
                          {menuItemIndex !== 0 && <MenubarSeparator className="bg-border-muted" />}
                          {menuItem
                            .filter((item) => item.enabled !== false)
                            .map((item, itemIdx) =>
                              !item.href ? (
                                <div
                                  key={`desktop-docs-menu-section-label-${item.label}-${itemIdx}`}
                                  className="font-mono tracking-wider flex items-center text-foreground-muted text-xs uppercase rounded-md p-2 leading-none"
                                >
                                  {item.label}
                                </div>
                              ) : (
                                <NavigationMenuLink
                                  key={`desktop-docs-menu-section-label-${item.label}-${itemIdx}`}
                                  asChild
                                >
                                  <MenuItem
                                    href={item.href}
                                    title={item.label}
                                    community={item.community}
                                    icon={item.icon}
                                  />
                                </NavigationMenuLink>
                              )
                            )}
                        </Fragment>
                      ))}
                    </div>
                  </NavigationMenuContent>
                </NavigationMenuItem>
              ) : (
                <NavigationMenuItem
                  key={`desktop-docs-menu-section-${section[0].label}-${sectionIdx}`}
                  className="text-sm relative h-full"
                >
                  <NavigationMenuLink asChild>
                    <Link
                      href={section[0].href || '#'}
                      className={cn(
                        navigationMenuTriggerStyle(),
                        triggerClassName,
                        activeLabel === section[0].label && 'text-foreground border-foreground'
                      )}
                    >
                      {section[0].label === 'Home' ? (
                        <MenuIconPicker icon={section[0].icon || ''} />
                      ) : (
                        section[0].label
                      )}
                    </Link>
                  </NavigationMenuLink>
                </NavigationMenuItem>
              )
          )}
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}