Design System

Menu 

<ul class="Menu Menu--list">
    <li class="Menu__item Menu__item--level-1 ">
        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands">Our Brands</a>
    </li>
    <li class="Menu__item Menu__item--level-1 ">
        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals">Specialty Chemicals</a>
        <ul>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/signature-brands">Signature Brands</a>
            </li>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatrac-acids-esters">FlexaTrac® – Acids &amp; Esters</a>
            </li>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines">FlexaTram™ – Amines</a>
                <ul>
                    <li class="Menu__item Menu__item--level-3 ">
                        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines/flexatram-bhm">FlexaTram™-BHM</a>
                    </li>
                    <li class="Menu__item Menu__item--level-3 ">
                        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines/flexatram-dam">FlexaTram™-DAM</a>
                    </li>
                    <li class="Menu__item Menu__item--level-3 active">
                        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines/flexatram-hmt">FlexaTram™-HMT</a>
                    </li>
                </ul>
            </li>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatril-nitriles">FlexaTril™ – Nitriles</a>
            </li>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/specialty-chemicals-for-industrial-and-institutional-cleaners">Specialty chemicals for industrial and institutional cleaners</a>
            </li>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/specialty-chemicals-for-oil-and-gas">Specialty chemicals for oil and gas</a>
            </li>
            <li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/specialty-chemicals-for-coatings-and-adhesives">Specialty chemicals for coatings and adhesives</a>
            </li>
        </ul>
    </li>
    <li class="Menu__item Menu__item--level-1 ">
        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals">Intermediate Chemicals</a>
    </li>
    <li class="Menu__item Menu__item--level-1 ">
        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers">Fibers</a>
    </li>
    <li class="Menu__item Menu__item--level-1 ">
        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve">Bioserve</a>
    </li>
    <li class="Menu__item Menu__item--level-1 ">
        <a href="https://new-ascend-dev.5thring.co.uk/products-brands/esseti-plast-color-and-additive-masterbatches">Esseti Plast Color and Additive Masterbatches</a>
    </li>
</ul>
 
<ul class="Menu Menu--list">
	<li class="Menu__item Menu__item--level-1 ">
		<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands">Our Brands</a>
	</li>
	<li class="Menu__item Menu__item--level-1 ">
		<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals">Specialty Chemicals</a>
		<ul>
			<li class="Menu__item Menu__item--level-2 ">
                <a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/signature-brands">Signature Brands</a>
			</li>
			<li class="Menu__item Menu__item--level-2 ">
				<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatrac-acids-esters">FlexaTrac® – Acids &amp; Esters</a>
			</li>
			<li class="Menu__item Menu__item--level-2 ">
				<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines">FlexaTram™ – Amines</a>
				<ul>
					<li class="Menu__item Menu__item--level-3 ">
						<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines/flexatram-bhm">FlexaTram™-BHM</a>
					</li>
					<li class="Menu__item Menu__item--level-3 ">
						<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines/flexatram-dam">FlexaTram™-DAM</a>
					</li>
					<li class="Menu__item Menu__item--level-3 active">
						<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines/flexatram-hmt">FlexaTram™-HMT</a>
					</li>
				</ul>
			</li>
			<li class="Menu__item Menu__item--level-2 ">
				<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatril-nitriles">FlexaTril™ – Nitriles</a>
			</li>
			<li class="Menu__item Menu__item--level-2 ">
				<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/specialty-chemicals-for-industrial-and-institutional-cleaners">Specialty chemicals for industrial and institutional cleaners</a>
			</li>
			<li class="Menu__item Menu__item--level-2 ">
				<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/specialty-chemicals-for-oil-and-gas">Specialty chemicals for oil and gas</a>
			</li>
			<li class="Menu__item Menu__item--level-2 ">
				<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/specialty-chemicals-for-coatings-and-adhesives">Specialty chemicals for coatings and adhesives</a>
			</li>
		</ul>
	</li>
	<li class="Menu__item Menu__item--level-1 ">
		<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals">Intermediate Chemicals</a>
	</li>
	<li class="Menu__item Menu__item--level-1 ">
		<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers">Fibers</a>
	</li>
	<li class="Menu__item Menu__item--level-1 ">
		<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve">Bioserve</a>
	</li>
	<li class="Menu__item Menu__item--level-1 ">
		<a href="https://new-ascend-dev.5thring.co.uk/products-brands/esseti-plast-color-and-additive-masterbatches">Esseti Plast Color and Additive Masterbatches</a>
	</li>
</ul>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content: 
    .Menu {
  @apply self-start
    pr-0
    py-4
    pl-7
    2xl:pl-8
    3xl:pl-10
    font-bold
    bg-gray-100
    border
    border-gray-300
    rounded-md;

  &:not(:has(.Menu__item)) {
    @apply hidden;
  }

  &__title {
    @apply mt-4
      mb-6
      xl:mb-8
      text-black;
    
    & + .Menu__list {
      .Menu__item {
        &:first-child {
          @apply border-t
          border-gray-300;
        }
      }
    } 
  }

  .Menu__item {
    &.active {
      & > a {
        @apply text-green;
      }
    }

    &--level-1 {      
      @apply
        text-base
        xl:text-lg;
    }
  }

  .Menu__list {
    li.Menu__item {
      &.active {
        & > a {
          @apply text-green;
        }
      }
    }
  }

  &.Menu--list {
    .Menu__item {
      @apply pr-4;
    }

    .Menu__item--level-1 {
      @apply py-5;

      ul {
        @apply overflow-y-hidden 
          mt-2
          pl-3;
      }
      
      &:not(:last-child) {
        @apply border-b
        border-gray-300;
      }
    }

    .Menu__item--level-2, .Menu__item--level-3 {
      @apply relative
        mt-4
        mr-5
        mb-4
        ml-1
        pl-5
        text-base;

      &:not(.active) a {
        @apply text-black;
      } 

      &:first-child {
        @apply mt-2;
      }

      &:last-child {
        @apply mb-0;

        &:before {
          @apply h-[1000px]
            -top-[988px]
            border-b
            border-l;
        }
      }

      &:before {
        @apply content-empty
          inline-block 
          absolute
          -top-[67px]
          -left-[15px]
          w-[20px]
          h-[80px]
          border-gray-300
          border-b;
      }
    }
  }
    
  &.Menu--grid {
    @apply pr-8 
      pb-10;

    .Menu__item {
      &.Menu__item--level-1 {

        @apply not-last:mb-5  
          xl:not-last:mb-7 
          text-gray-500;

        ul {
          @apply grid
            grid-cols-5
            3xl:grid-cols-6
            gap-2
            mt-2;
        }
      }
    }
  }

}
  • URL: /components/raw/menu/menu.scss
  • Filesystem Path: src/components/01-elements/menu/menu.scss
  • Size: 2.1 KB

No notes defined.