Subdomain nav bar

Use the subdomain nav bar component for top level navigation for subdomain sites.
  • Experimental
  • Not reviewed for accessibility
import {SubdomainNavBar} from '@primer/react-brand'

Examples

SubdomainNavBar is designed to fix to the top of the viewport.

Please refer to our Storybook examples to see the component in a full-screen browser as originally intended.

Basic

SubdomainNavBar offers an optional search form control. The form can operate in both onSubmit and onChange modes, with the latter facilitating inline results to appear.

Component props

SubdomainNavBar Required

NameTypeDefaultDescription
children'SubdomainNavBar.Link'
'SubdomainNavBar.Search'
'SubdomainNavBar.PrimaryAction'
'SubdomainNavBar.SecondaryAction'
'React.ReactElement'
,
Valid child nodes
classNamestringSets a custom class
idstringSets a custom id
logoHrefstringhttps//github.comOptionally change the URL of the logo
titlestringThe title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.
titleHrefstring/The URL for the site. Typically used to link the title prop value to the site root.
refReact.RefObjectForward a Ref to the underlying DOM node

SubdomainNavBar.Link are anchor links.

NameTypeDefaultDescription
childrenstringLabel text
classNamestringApplies a custom class
hrefstringDestination path for the anchor element
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node

Additional props can be passed to the <a> element. See MDN for a list of props accepted by the <anchor> element.