@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

package/generated/docs/components_components-navbar-docs.md

@@ -0,0 +1,1847 @@
+Navbar
+======
+
+Overview
+--------
+
+The `IressNavbar` component defines your application’s global header. It usually contains your company logo, global navigation links, and an application heading.
+
+[](./iframe.html?id=components-navbar--default)
+
+A very basic navbar
+
+```
+
+<IressNavbar\>
+  <IressText\>
+    A very basic navbar  </IressText\>
+</IressNavbar\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ align, children, className, "data-testid": dataTestId, element: Tag = "div", mode, noGutter, variant, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV( Tag, { ...restProps, className: classNames(className, "iress-u-text", { \[\`iress--${variant}\`\]: Boolean(variant), \[\`iress--${mode}\`\]: Boolean(mode), \[\`${GlobalCSSClass.TextAlignBase}--${align}\`\]: Boolean(align), "iress--no-gutter": noGutter }), "data-testid": dataTestId, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 22, columnNumber: 1 }, this )
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+Examples
+--------
+
+The `IressNavbar` component is designed to be flexible. You can set up simple navbars by using the slots and props to generate and organise your content.
+
+If you need a complex layout that isn't covered by the slots and props, you can create custom navbars by supplying your own structure.
+
+### Logos
+
+Navbars usually contain a company logo. You can add this directly to your `IressNavbar` as an `<img>` or `<svg>` element, or via the `logoSrc` prop. Simply set the value to the URL of the image you wish to use, and the `IressNavbar` component will render the image for you.
+
+All images should have alt text to provide context for screen reader users. If using the `logoSrc` prop, you should also set the `logoAltText` prop to ensure that your logo is accurately described.
+
+[](./iframe.html?id=components-navbar--logos)
+
+![Home](assets/ids-logo.png)
+
+```
+
+<IressNavbar logo\={<img alt\="Home" src\="assets/ids-logo.png"/>} />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+logo :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Fixed positioning
+
+Navbars can be fixed to the top of your viewport to ensure that content is always available to users; simply set the `fixed` prop to true. If the prop isn't set (or if it's set to false), the navbar will scroll off-screen when the user scrolls.
+
+If you use the fixed prop, you'll need to add padding to the top of your content container as the `IressNavbar` will be treated as having zero height when the DOM layout is calculated. If you don't add padding, content can be hidden behind the `IressNavbar` even when the user scrolls to the top of the page.
+
+### Alignment
+
+The `IressNavbar` allows you to set up some simple layouts via the horizontal alignment prop. You can set this to `start`, `end` or `between`.
+
+`start` aligns the `children` slot and the `nav` slot content to the start of the `IressNavbar` (to the left for left-to-right languages).
+
+`end` aligns the `children` slot and the `nav` slot content to the end of the `IressNavbar` (to the right for left-to-right languages).
+
+`between` splits the `children` and `nav` slots; the `children` slot content will be at the start of the `IressNavbar`, whereas the `nav` slot content will be at end of the `IressNavbar`. If no `children` slot content is provided, the `nav` slot content will still appear at the end of the `IressNavbar`.
+
+Vertical alignment is always set to middle, to ensure that content aligns correctly.
+
+[](./iframe.html?id=components-navbar--align)
+
+![IDS logo](assets/ids-logo.png)
+
+Align start
+
+Nav slot content
+
+![IDS logo](assets/ids-logo.png)
+
+Align between
+
+Nav slot content
+
+![IDS logo](assets/ids-logo.png)
+
+Align end
+
+Nav slot content
+
+```
+
+{
+  render: () \=> <IressStack gutter\="lg"\>
+      <IressNavbar horizontalAlign\="start" logo\={<img src\="assets/ids-logo.png" alt\="IDS logo" />} nav\={<IressText\>Nav slot content</IressText\>}\>
+        <IressText\>Align start</IressText\>
+      </IressNavbar\>
+      <IressNavbar horizontalAlign\="between" logo\={<img src\="assets/ids-logo.png" alt\="IDS logo" />} nav\={<IressText\>Nav slot content</IressText\>}\>
+        <IressText\>Align between</IressText\>
+      </IressNavbar\>
+      <IressNavbar horizontalAlign\="end" logo\={<img src\="assets/ids-logo.png" alt\="IDS logo" />} nav\={<IressText\>Nav slot content</IressText\>}\>
+        <IressText\>Align end</IressText\>
+      </IressNavbar\>
+    </IressStack\>
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | \- |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | \- |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | \- |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | \- |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | \- |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | \- |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | \- |
+
+### Logo slot
+
+The `logo` slot, as the name suggests, is designed for logos. Use this is you want to supply your own image element or SVG. Content in the Logo slot will always appear at the start of your Navbar (to the left for left-to-right languages).
+
+[](./iframe.html?id=components-navbar--logos)
+
+![Home](assets/ids-logo.png)
+
+```
+
+<IressNavbar logo\={<img alt\="Home" src\="assets/ids-logo.png"/>} />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+logo :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Children and nav slots
+
+The default `children` slot is used for generic content like headings. You'll also pass in `children` content if you create a custom navbar.
+
+[](./iframe.html?id=components-navbar--children)
+
+![IDS logo](assets/ids-logo.png)
+
+Children slot content
+=====================
+
+Nav slot content
+
+```
+
+<IressNavbar
+  logo\={<img alt\="IDS logo" src\="assets/ids-logo.png"/>}
+  nav\={<IressText\>Nav slot content</IressText\>}
+\>
+  <IressText\>
+    <h1\>
+      Children slot content    </h1\>
+  </IressText\>
+</IressNavbar\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ align, children, className, "data-testid": dataTestId, element: Tag = "div", mode, noGutter, variant, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV( Tag, { ...restProps, className: classNames(className, "iress-u-text", { \[\`iress--${variant}\`\]: Boolean(variant), \[\`iress--${mode}\`\]: Boolean(mode), \[\`${GlobalCSSClass.TextAlignBase}--${align}\`\]: Boolean(align), "iress--no-gutter": noGutter }), "data-testid": dataTestId, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 22, columnNumber: 1 }, this )
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+logo :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+nav :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ align, children, className, "data-testid": dataTestId, element: Tag = "div", mode, noGutter, variant, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV( Tag, { ...restProps, className: classNames(className, "iress-u-text", { \[\`iress--${variant}\`\]: Boolean(variant), \[\`iress--${mode}\`\]: Boolean(mode), \[\`${GlobalCSSClass.TextAlignBase}--${align}\`\]: Boolean(align), "iress--no-gutter": noGutter }), "data-testid": dataTestId, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 22, columnNumber: 1 }, this )
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+The `nav` slot is for navigation content like links, and is designed to be used with the Menu component. Content in the `nav` slot will be rendered inside a `nav` element. Nav elements should be labelled to help screen reader users understand which navigation content they're interacting with. We add a default label of "primary navigation" to the `nav` element inside the `nav` slot, but you can override that with the `navLabel` prop.
+
+[](./iframe.html?id=components-navbar--nav-menu)
+
+![IDS logo](assets/ids-logo.png)
+
+[Link 1](#)[Link 2](#)[Link 3](#)
+
+```
+
+<IressNavbar
+  logo\={<img alt\="IDS logo" src\="assets/ids-logo.png"/>}
+  nav\={<IressMenu layout\="inline" role\="nav"\><IressMenuItem href\="#"\>Link 1</IressMenuItem\><IressMenuItem href\="#" selected\>Link 2</IressMenuItem\><IressMenuItem href\="#"\>Link 3</IressMenuItem\></IressMenu\>}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+logo :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+nav :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ changeOnBlur, children, className, defaultSelected, fluid, id: idProp, layout = "stack", multiSelect, noWrap, onChange, role: roleProp, selected, type, ...restProps }) => { \_s(); const id = useIdIfNeeded({ id: idProp }); const roleOrType = roleProp ?? type; const role = useMenuRole(multiSelect, roleOrType); const aria = useMenuAria({ id, layout, multiSelect, role }); const styles = useMenuStyles({ className, fluid, layout, role: roleOrType }); const isComposite = useMenuComposite(role); const props = { ...restProps, ...styles, ...aria, role, id, children }; if (type !== void 0) { idsLogger( \`IressMenu: The type prop is deprecated. Please use the role prop instead.\` ); } return /\* @\_\_PURE\_\_ \*/ jsxDEV( MenuProvider, { changeOnBlur, defaultSelected, id, layout, multiSelect, nav: roleOrType === "nav", noWrap, onChange, role, selected, children: isComposite ? /\* @\_\_PURE\_\_ \*/ jsxDEV(Composite, { loop: role === "menu", render: /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 49 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 7 }, this) : /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 77, columnNumber: 7 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 62, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+[](./iframe.html?id=components-navbar--nav-menu-and-children)
+
+![IDS logo](assets/ids-logo.png)
+
+Default slot content
+====================
+
+[Link 1](#)[Link 2](#)[Link 3](#)
+
+```
+
+<IressNavbar
+  logo\={<img alt\="IDS logo" src\="assets/ids-logo.png"/>}
+  nav\={<IressMenu layout\="inline" role\="nav"\><IressMenuItem href\="#"\>Link 1</IressMenuItem\><IressMenuItem href\="#" selected\>Link 2</IressMenuItem\><IressMenuItem href\="#"\>Link 3</IressMenuItem\></IressMenu\>}
+\>
+  <IressText\>
+    <h1\>
+      Default slot content    </h1\>
+  </IressText\>
+</IressNavbar\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ align, children, className, "data-testid": dataTestId, element: Tag = "div", mode, noGutter, variant, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV( Tag, { ...restProps, className: classNames(className, "iress-u-text", { \[\`iress--${variant}\`\]: Boolean(variant), \[\`iress--${mode}\`\]: Boolean(mode), \[\`${GlobalCSSClass.TextAlignBase}--${align}\`\]: Boolean(align), "iress--no-gutter": noGutter }), "data-testid": dataTestId, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 22, columnNumber: 1 }, this )
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+logo :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+nav :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ changeOnBlur, children, className, defaultSelected, fluid, id: idProp, layout = "stack", multiSelect, noWrap, onChange, role: roleProp, selected, type, ...restProps }) => { \_s(); const id = useIdIfNeeded({ id: idProp }); const roleOrType = roleProp ?? type; const role = useMenuRole(multiSelect, roleOrType); const aria = useMenuAria({ id, layout, multiSelect, role }); const styles = useMenuStyles({ className, fluid, layout, role: roleOrType }); const isComposite = useMenuComposite(role); const props = { ...restProps, ...styles, ...aria, role, id, children }; if (type !== void 0) { idsLogger( \`IressMenu: The type prop is deprecated. Please use the role prop instead.\` ); } return /\* @\_\_PURE\_\_ \*/ jsxDEV( MenuProvider, { changeOnBlur, defaultSelected, id, layout, multiSelect, nav: roleOrType === "nav", noWrap, onChange, role, selected, children: isComposite ? /\* @\_\_PURE\_\_ \*/ jsxDEV(Composite, { loop: role === "menu", render: /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 49 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 7 }, this) : /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 77, columnNumber: 7 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 62, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Simple responsive Navbars
+
+You can use the `breakpoint` prop to create simple responsive navbars. When set, content in the `nav` slot will be hidden below that breakpoint. Instead, the `IressNavbar` will render a toggle button that can be used to show / hide the Nav slot content.
+
+If you need more control over your navbar's responsive behaviour, you can create a custom navbar.
+
+[](./iframe.html?id=components-navbar--responsive)
+
+![IDS logo](assets/ids-logo.png)
+
+[Link 1](#)[Link 2](#)[Link 3](#)[Link 4](#)[Link 5](#)
+
+```
+
+<IressNavbar
+  breakpoint\="sm"
+  logo\={<img alt\="IDS logo" src\="assets/ids-logo.png"/>}
+  nav\={<IressMenu layout\="inline" role\="nav"\><IressMenuItem href\="#"\>Link 1</IressMenuItem\><IressMenuItem href\="#" selected\>Link 2</IressMenuItem\><IressMenuItem href\="#"\>Link 3</IressMenuItem\><IressMenuItem href\="#"\>Link 4</IressMenuItem\><IressMenuItem href\="#"\>Link 5</IressMenuItem\></IressMenu\>}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | 
+
+"sm"
+
+ |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+logo :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+nav :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ changeOnBlur, children, className, defaultSelected, fluid, id: idProp, layout = "stack", multiSelect, noWrap, onChange, role: roleProp, selected, type, ...restProps }) => { \_s(); const id = useIdIfNeeded({ id: idProp }); const roleOrType = roleProp ?? type; const role = useMenuRole(multiSelect, roleOrType); const aria = useMenuAria({ id, layout, multiSelect, role }); const styles = useMenuStyles({ className, fluid, layout, role: roleOrType }); const isComposite = useMenuComposite(role); const props = { ...restProps, ...styles, ...aria, role, id, children }; if (type !== void 0) { idsLogger( \`IressMenu: The type prop is deprecated. Please use the role prop instead.\` ); } return /\* @\_\_PURE\_\_ \*/ jsxDEV( MenuProvider, { changeOnBlur, defaultSelected, id, layout, multiSelect, nav: roleOrType === "nav", noWrap, onChange, role, selected, children: isComposite ? /\* @\_\_PURE\_\_ \*/ jsxDEV(Composite, { loop: role === "menu", render: /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 49 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 7 }, this) : /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 77, columnNumber: 7 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 62, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Navbar with icons
+
+Using icons in `IressButton`s and `IressMenuItem`s can add visual interest to your navbar, as well as saving space. However, if the icon is the only content (ie there's no visible text description), the meaning of the icon may not be clear to users.
+
+To help users, you can add an `IressTooltip` around the `IressMenuItem`. This will enable users to hover or focus on the element to find out what it does.
+
+For more information about using tooltips, see the [Tooltip Documentation](?path=/docs/components-tooltip--docs).
+
+[](./iframe.html?id=components-navbar--icons)
+
+Iress Design System
+===================
+
+[](#)
+
+[](#)
+
+[](#)
+
+```
+
+<IressNavbar
+  horizontalAlign\="between"
+  nav\={<IressMenu layout\="inline" role\="nav"\><IressTooltip align\="bottom" tooltipText\="User details"\><IressMenuItem href\="#"\><IressIcon name\="user" size\="2x"/></IressMenuItem\></IressTooltip\><IressTooltip align\="bottom" tooltipText\="Add task"\><IressMenuItem href\="#" selected\><IressIcon name\="plus" size\="2x"/></IressMenuItem\></IressTooltip\><IressTooltip align\="bottom" tooltipText\="Settings"\><IressMenuItem href\="#"\><IressIcon name\="cog" size\="2x"/></IressMenuItem\></IressTooltip\></IressMenu\>}
+\>
+  <IressText\>
+    <h1\>
+      Iress Design System    </h1\>
+  </IressText\>
+</IressNavbar\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ align, children, className, "data-testid": dataTestId, element: Tag = "div", mode, noGutter, variant, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV( Tag, { ...restProps, className: classNames(className, "iress-u-text", { \[\`iress--${variant}\`\]: Boolean(variant), \[\`iress--${mode}\`\]: Boolean(mode), \[\`${GlobalCSSClass.TextAlignBase}--${align}\`\]: Boolean(align), "iress--no-gutter": noGutter }), "data-testid": dataTestId, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 22, columnNumber: 1 }, this )
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | 
+
+"between"
+
+ |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+nav :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ changeOnBlur, children, className, defaultSelected, fluid, id: idProp, layout = "stack", multiSelect, noWrap, onChange, role: roleProp, selected, type, ...restProps }) => { \_s(); const id = useIdIfNeeded({ id: idProp }); const roleOrType = roleProp ?? type; const role = useMenuRole(multiSelect, roleOrType); const aria = useMenuAria({ id, layout, multiSelect, role }); const styles = useMenuStyles({ className, fluid, layout, role: roleOrType }); const isComposite = useMenuComposite(role); const props = { ...restProps, ...styles, ...aria, role, id, children }; if (type !== void 0) { idsLogger( \`IressMenu: The type prop is deprecated. Please use the role prop instead.\` ); } return /\* @\_\_PURE\_\_ \*/ jsxDEV( MenuProvider, { changeOnBlur, defaultSelected, id, layout, multiSelect, nav: roleOrType === "nav", noWrap, onChange, role, selected, children: isComposite ? /\* @\_\_PURE\_\_ \*/ jsxDEV(Composite, { loop: role === "menu", render: /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 49 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 75, columnNumber: 7 }, this) : /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { ...props }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 77, columnNumber: 7 }, this) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Menu/Menu.tsx", lineNumber: 62, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Fixed navbar focus handling
+
+WCAG 2.2 includes a new AA criterion designed to prevent focusable content from being hidden by other on-screen content like fixed navbars ([More details](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)).
+
+When `handledFocus` is set and navbar is `fixed`, navbar ensures any elements that recieve focus are not hidden by the navbar. It does this by scrolling the window enough for the focussed element to be in the visible viewport.
+
+#### Skip links
+
+Navbars often contain the same content across multiple pages. To make life easier for keyboard and screen reader users, it's considered good practice to use an `IressSkipLink` component alongside your navbar.
+
+Skip links allow keyboard users to skip the navbar entirely and access the main content on the page. This means they don't have to tab through every nav link or button every time they navigate to a new screen.
+
+You can find out more about skiplinks in the [SkipLink Documentation](?path=/docs/components-skiplink--docs).
+
+The `IressSkipLink` should appear before your navbar to ensure it's the first content that users interact with:
+
+<body\>
+  <IressSkipLink targetId\="main-content" />
+  <IressNavbar\>...</IressNavbar\>
+  <main id\="main-content" tabIndex\={\-1}\>
+    ...  </main\>
+</body\>
+
+```