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
Search
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.
Accessibility
When the menu is open on narrow viewports, ensure that the rest of the document is hidden from screen readers. This can be achieved by adding aria-hidden="true" or inert to the main content area when the menu is open.
Use the onNarrowMenuToggle prop to detect when the mobile menu is opened or closed.
Component props
SubdomainNavBar Required
| Name | Type | Default | Description |
|---|---|---|---|
children | 'SubdomainNavBar.Link''SubdomainNavBar.Search''SubdomainNavBar.PrimaryAction''SubdomainNavBar.SecondaryAction''React.ReactElement' | Valid child nodes | |
className | string | Sets a custom class | |
id | string | Sets a custom id | |
logoHref | string | https//github.com | Optionally change the URL of the logo |
title | string | The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies. | |
titleHref | string | / | The URL for the site. Typically used to link the title prop value to the site root. |
ref | React.RefObject | Forward a Ref to the underlying DOM node | |
onNarrowMenuToggle | (isOpen: boolean) => void | When the mobile menu is opened or closed, this callback is called with the new open state. |
SubdomainNavBar.Link Required
SubdomainNavBar.Link are anchor links.
| Name | Type | Default | Description |
|---|---|---|---|
children | string | Label text | |
className | string | Applies a custom class | |
href | string | Destination path for the anchor element | |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node | |
isExternal | boolean | false | When true, renders a external link icon after to the link |
Additional props can be passed to the <a> element. See MDN for a list of props accepted by the <anchor> element.