1. Components
  2. Navigation

Primary nav

The main navigation for The Cosmopolitan site, visible at the top of the screen.

Default primary nav orc-c-primary-nav

The main navigation for The Cosmopolitan site, visible at the top of the screen.

Primary nav megamenu orc-c-primary-nav--megamenu

The main navigation for The Cosmopolitan site that contains a megamenu on larger screens.

  • 

    <nav class="orc-c-primary-nav " role="navigation">

  <ul class="orc-c-primary-nav__list">

    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">The Resort</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-05-accomodations&#x2F;04-pages-05-accomodations.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Book Your Stay</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-05-accomodations&#x2F;04-pages-05-accomodations.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Rooms and Suites</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-06-concierge&#x2F;04-pages-06-concierge.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Concierge</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Amenities</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-07-pool-district&#x2F;04-pages-07-pool-district.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Pool District</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-08-sahra-spa-hammam&#x2F;04-pages-08-sahra-spa-hammam.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Sahra Spa &amp; Hammam</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-09-violet-hour-salon&#x2F;04-pages-09-violet-hour-salon.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Violet Hour Salon</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-10-fitness&#x2F;04-pages-10-fitness.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Fitness</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-11-shops&#x2F;04-pages-11-shops.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Shops</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-07-pool-district&#x2F;04-pages-07-pool-district.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Art</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Your Event</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-13-weddings&#x2F;04-pages-13-weddings.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Weddings</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-14-meet&#x2F;04-pages-14-meet.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Meetings &amp; Events</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-14-social-groups&#x2F;04-pages-14-social-groups.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Social Groups</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">Entertainment</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-10-entertainment-calendar&#x2F;04-pages-10-entertainment-calendar.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Event Calendar</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Venues</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-16-the-chelsea&#x2F;04-pages-16-the-chelsea.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">The Chelsea</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-17-marquee-night&#x2F;04-pages-17-marquee-night.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Marquee Night&#x2F;Day Club</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-18-restaurant-detail&#x2F;04-pages-18-restaurant-detail.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Rose. Rabbit. Lie.</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-19-opium&#x2F;04-pages-19-opium.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Opium</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Don&#39;t Miss It</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-20-hoops-and-hops&#x2F;04-pages-20-hoops-and-hops.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Hoops &amp; Hops</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">


                  <span class='orc-c-primary-nav__heading'>Vegas Shenanigans</span>

                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="http:&#x2F;&#x2F;52stories.cosmopolitanlasvegas.com&#x2F;" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">52 Stories</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">Food &amp; Drink</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-21-restaurants&#x2F;04-pages-21-restaurants.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Restaurant Collection</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-23-lounges-bars&#x2F;04-pages-23-lounges-bars.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Lounges &amp; Bars</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-24-room-service&#x2F;04-pages-24-room-service.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Room Service</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-25-group-dining&#x2F;04-pages-25-group-dining.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Group Dining</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">The Cocktail Hour</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-26-social-hour&#x2F;04-pages-26-social-hour.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">The Social Hour</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-27-unlock-your-mondays&#x2F;04-pages-27-unlock-your-mondays.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Unlock Your Mondays</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">The Casino</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-28-casino-overview&#x2F;04-pages-28-casino-overview.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Casino Overview</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-29-slots&#x2F;04-pages-29-slots.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Slots</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-30-tables&#x2F;04-pages-30-tables.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Table Games</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-31-race-sports-book&#x2F;04-pages-31-race-sports-book.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Race &amp; Sports Book</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-32-tournaments-events&#x2F;04-pages-32-tournaments-events.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Tournament &amp; Events</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">Identity</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Your Exclusive Offers</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-itinerary&#x2F;04-pages-itinerary.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Your Itinerary</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-account-activity&#x2F;04-pages-account-activity.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Your Recent Activity</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-profile&#x2F;04-pages-profile.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Profile</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-marriott-transfer&#x2F;04-pages-marriott-transfer.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Convert Marriott Rewards</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Join or Learn More</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-about-identity&#x2F;04-pages-about-identity.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">About Identity</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-34-identity-faq&#x2F;04-pages-34-identity-faq.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">FAQs</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->

  </ul>
  <!-- end orc-c-primary-nav__list -->

</nav>
<!-- end orc-c-primary-nav -->
    

  • 

    <nav class="orc-c-primary-nav " role="navigation">

  <ul class="orc-c-primary-nav__list">

    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">The Resort</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-05-accomodations&#x2F;04-pages-05-accomodations.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Book Your Stay</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-05-accomodations&#x2F;04-pages-05-accomodations.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Rooms and Suites</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-06-concierge&#x2F;04-pages-06-concierge.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Concierge</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Amenities</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-07-pool-district&#x2F;04-pages-07-pool-district.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Pool District</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-08-sahra-spa-hammam&#x2F;04-pages-08-sahra-spa-hammam.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Sahra Spa &amp; Hammam</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-09-violet-hour-salon&#x2F;04-pages-09-violet-hour-salon.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Violet Hour Salon</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-10-fitness&#x2F;04-pages-10-fitness.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Fitness</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-11-shops&#x2F;04-pages-11-shops.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Shops</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-07-pool-district&#x2F;04-pages-07-pool-district.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Art</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Your Event</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-13-weddings&#x2F;04-pages-13-weddings.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Weddings</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-14-meet&#x2F;04-pages-14-meet.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Meetings &amp; Events</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-14-social-groups&#x2F;04-pages-14-social-groups.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Social Groups</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">Entertainment</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-10-entertainment-calendar&#x2F;04-pages-10-entertainment-calendar.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Event Calendar</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Venues</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-16-the-chelsea&#x2F;04-pages-16-the-chelsea.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">The Chelsea</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-17-marquee-night&#x2F;04-pages-17-marquee-night.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Marquee Night&#x2F;Day Club</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-18-restaurant-detail&#x2F;04-pages-18-restaurant-detail.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" data-nav-image-alt="rise and dine">
                                        <span class="orc-c-primary-nav__sublink-text">Rose. Rabbit. Lie.</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-19-opium&#x2F;04-pages-19-opium.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-room.jpg" data-nav-image-alt="mischief">
                                        <span class="orc-c-primary-nav__sublink-text">Opium</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Don&#39;t Miss It</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-20-hoops-and-hops&#x2F;04-pages-20-hoops-and-hops.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Hoops &amp; Hops</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">


                  <span class='orc-c-primary-nav__heading'>Vegas Shenanigans</span>

                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="http:&#x2F;&#x2F;52stories.cosmopolitanlasvegas.com&#x2F;" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">52 Stories</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">Food &amp; Drink</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-21-restaurants&#x2F;04-pages-21-restaurants.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Restaurant Collection</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-23-lounges-bars&#x2F;04-pages-23-lounges-bars.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Lounges &amp; Bars</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-24-room-service&#x2F;04-pages-24-room-service.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Room Service</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-25-group-dining&#x2F;04-pages-25-group-dining.rendered.html" class="orc-c-primary-nav__sublink orc-js-nav-sublink" data-nav-image="..&#x2F;..&#x2F;images&#x2F;sample-rose-rabbit-lie.jpg" data-nav-image-alt="rose rabbit lie">
                                        <span class="orc-c-primary-nav__sublink-text">Group Dining</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">The Cocktail Hour</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-26-social-hour&#x2F;04-pages-26-social-hour.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">The Social Hour</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-27-unlock-your-mondays&#x2F;04-pages-27-unlock-your-mondays.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Unlock Your Mondays</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">The Casino</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-28-casino-overview&#x2F;04-pages-28-casino-overview.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Casino Overview</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-29-slots&#x2F;04-pages-29-slots.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Slots</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-30-tables&#x2F;04-pages-30-tables.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Table Games</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-31-race-sports-book&#x2F;04-pages-31-race-sports-book.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Race &amp; Sports Book</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-32-tournaments-events&#x2F;04-pages-32-tournaments-events.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Tournament &amp; Events</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->
    <li class="orc-c-primary-nav__item  orc-js-nav-dropdown-item">
      <a href="#" href="#" class="orc-c-primary-nav__link orc-js-nav-dropdown-trigger">
				<span class="orc-c-primary-nav__link-text">Identity</span>


                <svg class="orc-c-icon orc-c-primary-nav__icon orc-js-nav-icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

                <svg class="orc-c-icon orc-c-primary-nav__icon orc-u-is-hidden orc-js-nav-icon-swap">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#x"></use>
                </svg>

			</a>
      <!--end orc-c-primary-nav__link-->

      <div class="orc-c-primary-nav__panel orc-js-nav-dropdown">

        <div class="orc-c-primary-nav__panel-inner">

          <div class="orc-c-primary-nav__media-container">
            <img class="orc-c-primary-nav__img orc-js-nav-image-target" data-src="..&#x2F;..&#x2F;images&#x2F;sample-cosmopolitan.jpg" alt="The Cosmopolitan of Las Vegas" />
          </div>

          <div class="orc-c-primary-nav__list-container">

            <div class="orc-c-primary-nav__sublist-container">


              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Your Exclusive Offers</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-itinerary&#x2F;04-pages-itinerary.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Your Itinerary</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-account-activity&#x2F;04-pages-account-activity.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Your Recent Activity</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-profile&#x2F;04-pages-profile.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Profile</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-marriott-transfer&#x2F;04-pages-marriott-transfer.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">Convert Marriott Rewards</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->
            <div class="orc-c-primary-nav__sublist-container">
              <h3 class="orc-c-primary-nav__heading">Join or Learn More</h3>

              <ul class="orc-c-primary-nav__sublist">

                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-about-identity&#x2F;04-pages-about-identity.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">About Identity</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->
                <li class="orc-c-primary-nav__subitem">

                  <a href="&#x2F;patterns&#x2F;04-pages-34-identity-faq&#x2F;04-pages-34-identity-faq.rendered.html" class="orc-c-primary-nav__sublink ">
                                        <span class="orc-c-primary-nav__sublink-text">FAQs</span>
                                    </a>


                </li>
                <!-- end orc-c-nav__sublist__item -->

              </ul>
              <!-- end orc-c-nav__sublist -->

            </div>
            <!--end orc-c-primary-nav__sublist-container-->

          </div>
          <!--end orc-c-primary-nav__list-container-->

        </div>
        <!--end orc-c-primary-nav__panel-inner-->

      </div>
      <!--end orc-c-primary-nav__panel-->

    </li>
    <!-- end orc-c-primary-nav__list__item -->

  </ul>
  <!-- end orc-c-primary-nav__list -->

</nav>
<!-- end orc-c-primary-nav -->

Usage

When to use

Use this component when establishing the items and any subnavigation in the primary navigation. This container lives within a default header.

When to consider an alternative

The header contains both the primary nav and The Cosmopolitan logo. When creating a Cosmopolitan site, be sure to include a header at the top of each page.

Class Name Description 
orc-c-primary-nav
Required

Apply to the primary nav’s containing nav tag. This will establish the section where the primary nav list and items within will live.

 
orc-c-primary-nav--megamenu
Modifier

Apply in addition to the orc-c-primary-nav class to format the navigation into a megamenu.

 
orc-c-primary-nav__list
Required

Apply to the ul tag within the primary nav. This will help layout the primary nav items on various screen sizes.

 
orc-c-primary-nav__item
Required

Apply to each li tag within the primary nav list. This contains the links, icons, and a primary nav panel for subnavigation.

 
orc-js-nav-dropdown-item
JS

Applied in addition to the orc-c-primary-nav__item class so that JS can add functionality using this class.

 
orc-c-primary-nav__link
Required

Apply to an a tag if it has a link associated with it or a button tag if there is only functionality with it. This can either link out to another page on the site or it can trigger the primary nav panel that contains subnavigation.

 
orc-js-nav-dropdown-trigger
JS

Applied in addition to the orc-c-primary-nav__link class so that JS can add the functionality that opens/closes the primary nav panel with subnavigation when this is selected/deselected.

 
orc-c-primary-nav__link-text
Required

Actual text of the primary nav item. Apply to a span tag within the primary nav link.

 
orc-c-icon
Required

Base class for icons in the design system. Used to set the base styles for the primary nav icon

 
orc-c-primary-nav__icon
Required

Apply in addition to the orc-c-icon to format icon specifically for the primary navigation.

 
orc-js-nav-icon
JS

Added to the first primary nav icon that is visible by default. This allows JS to trigger this icon to swap icons when the primary nav panel is opened and closed.

 
orc-js-nav-icon-swap
JS

Added to the second primary nav icon that is hidden by default. This allows JS to trigger this icon to remove the hidden class when the primary nav panel is open and then add it back in when it is closed.

 
orc-u-is-hidden
Required

Utility class that is required when applied to the orc-js-nav-icon-swap icon to hide this icon by default. JS will toggle this class between orc-js-nav-icon-swap and orc-js-nav-icon when the orc-js-nav-dropdown-trigger is selected and deselected.

 
orc-c-primary-nav__panel
Required

Applied to div within each primary nav item with a subnavigation to help layout the subnavigation items.

 
orc-js-nav-dropdown
JS

Applied in addition to the orc-c-primary-nav__panel class to allow JS to open/close this when the orc-js-nav-dropdown-trigger is selected/deselected.

 
orc-c-primary-nav__panel-inner
Required

Applied to the inner div of the primary nav panel to help layout the content within the primary nav panel.

 
orc-c-primary-nav__media-container

Applied within the primary nav panel only when the orc-c-primary-nav--megamenu variation is implemented. This contains the image used within the primary nav panel. This is hidden on smaller screens but visible on larger screens.

 
orc-c-primary-nav__img

Actual image used within the primary nav panel with the megamenu variation.

 
orc-js-nav-image-target
JS

Applied in addition to orc-c-primary-nav__img to allow JS to change the source path for this image depending on what primary nav sublink you hover over to display a corresponding image for each item.

 
orc-c-primary-nav__list-container

Applied to the container of the sublist container when the megamenu variation is implemented. This helps with the layout of the primary nav sublist container.

 
orc-c-primary-nav__sublist-container

Applied to the container of the subnavigation when the megamenu variation is implemented. This helps with the layout of each subnavigation list.

 
orc-c-primary-nav__heading

Applied to the h3 tag labeling each primary nav sublist.

 
orc-c-primary-nav__sublist

Applied to the ul tag that is used for the primary nav subnavigation lists.

 
orc-c-primary-nav__subitem

Applied to each li tag of the orc-c-primary-nav__sublist.

 
orc-c-primary-nav__sublink

Applied to the a tag of each primary nav subitem to link out to another page.

 
orc-js-nav-sublink
JS

Applied in addition to each orc-c-primary-nav__sublink so that hovering over this will display the corresponding image on larger screens. This should only be used with the orc-c-primary-nav--megamenu variation.

 
orc-js-nav-sublink
JS

Applied in addition to each orc-c-primary-nav__sublink so that hovering over this will display the corresponding image on larger screens. This should only be used with the orc-c-primary-nav--megamenu variation.