Skip to content

Commit

Permalink
added nav items to menu item
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV committed Jan 22, 2025
1 parent 595562b commit 46c876b
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 54 deletions.
4 changes: 2 additions & 2 deletions ...nce/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 20 additions & 1 deletion src/components/header/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@
}
}

&-nav-links {
&-nav-menu {
background-color: var(--ons-color-branded-tint);
margin-bottom: 1rem;
padding-top: 2.5rem;
Expand All @@ -254,6 +254,25 @@
padding-left: 0;
row-gap: 1rem;
}
&__heading,
&__text,
&__description {
line-height: 1.714 !important;
}

&__child-list {
margin-bottom: 2rem !important;
}
.ons-grid {
margin-left: 0;
}
.ons-grid__col {
padding-left: 0;
padding-bottom: 1rem;
@include mq(m) {
padding-bottom: 0;
}
}
}

.ons-btn {
Expand Down
66 changes: 48 additions & 18 deletions src/components/header/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
| Name | Type | Required | Description |
| --------------------- | ------------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `<header>` element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping `header` |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. |
| mastheadLogo | object`<MastheadLogo>` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. |
| language | object`<Language>` | false | Settings for the [language selector](#language) |
| serviceLinks | object`<ServiceLinks>` | false | Settings for the [service links](#servicelinks) in the masthead |
| Name | Type | Required | Description |
| --------------------- | ------------------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `<header>` element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping `header` |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. |
| mastheadLogo | object`<MastheadLogo>` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. |
| language | object`<Language>` | false | Settings for the [language selector](#language) |
| serviceLinks | object`<ServiceLinks>` | false | Settings for the [service links](#servicelinks) in the masthead |
| title | string | true (unless `titleLogo` is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header `title` in an `<h1>` heading |
| titleLogo | object`<TitleLogo>` | false | Settings for a [custom title logo](#titlelogo) in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML `href` attribute for the link. |
| button | object`<SignOutButton>` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service |
| navigation | array`<Navigation>` | false | Settings for the [main menu links](#navigation) |
| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header `title` in an `<h1>` heading |
| titleLogo | object`<TitleLogo>` | false | Settings for a [custom title logo](#titlelogo) in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML `href` attribute for the link. |
| button | object`<SignOutButton>` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service |
| navigation | array`<Navigation>` | false | Settings for the [main menu links](#navigation) |
| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header |
| navLinks | object`<ServiceLinks>` | false | Settings for the [menu button navigation](#navLinks) in the masthead |

## MastheadLogo

Expand Down Expand Up @@ -61,6 +62,18 @@
| itemsList | array`<Item>` | true | Settings for an array of [list items](#item) for each navigation link |
| toggleServicesButton | object`<ToggleButton>` | true | Settings for the [mobile service links toggle button](#togglebutton) |

## NavLinks

| Name | Type | Required | Description |
| --------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | true | The HTML `id` of the `<nav>` element. Used for the `aria-controls` attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the `<nav>` element |
| ariaLabel | string | false | The `aria-label` attribute added to the `<nav>` element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The `aria-label` attribute added to the `<ul>` element. Defaults to “Menu links”. |
| keyLinksList | array`<Item>` | true | Settings for an array of [key list items](#keyitem) for each navigation link |
| itemsList | array`<Item>` | true | Settings for an array of [list items](#item) for each navigation link |
| toggleNavButton | object`<ToggleButton>` | true | Settings for the [menu toggle button](#toggleButton) |

## Language

| Name | Type | Required | Description |
Expand Down Expand Up @@ -108,6 +121,7 @@
| ariaLabel | string | false | The `aria-label` for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the [available icons](/foundations/icons#a-to-z). This is not compatible with navigation links. |
| children | string | false | Settings for an array of [sub items](#subitem) for each list item |

## SignOutButton

Expand All @@ -127,3 +141,19 @@
| itemsList | array`<Item>` | true | Settings for an array of [list items](#item) for each navigation link |
| currentPath | string or array`<string>` | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |

## KeyItem

| Name | Type | Required | Description |
| ----------- | ------ | -------- | --------------------------------------------------------------------- |
| url | string | false | The URL for the HTML `href` attribute for the path to the linked page |
| text | string | true | The text label for the heading |
| id | string | false | The HTML `id` of the link |
| description | string | false | The description for the item |

## SubItem

| Name | Type | Required | Description |
| ---- | ------ | -------- | --------------------------------------------------------------------- |
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| url | string | true | The URL for the HTML `href` attribute for the path to the linked page |
Loading

0 comments on commit 46c876b

Please sign in to comment.