Primer CSS Select Menu Right aligned

Last Updated : 31 May, 2022

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.

In this article, we'll see about Primer CSS Select Menu Right aligned. A select menu provides support for website navigation, filtering, etc. We can align the select menu to the right using SelectMenu right-* class.

Primer CSS Select Menu Right-aligned Class:

SelectMenu right-*: This class is used to align the select menu component to the right. The select menu can be aligned to right with the value ranging from 1 to 12.

Syntax:

<div class="SelectMenu right-*">
    ...
</div>

Example 1: Below example demonstrates the Select Menu right-aligned with the margin of 0.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Primer CSS Select Menu Right aligned</title>
    <link
      href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="m-4">
      <h1 style="color: green">GeeksforGeeks</h1>
      <h2>Primer CSS Select Menu Right aligned</h2>
    </div>

    <div class="d-flex flex-justify-end 
                position-relative m-6">
      <details class="details-reset details-overlay" open>
        <summary class="btn" aria-haspopup="true">
          Select Courses
        </summary>
        <div class="SelectMenu right-0">
          <div class="SelectMenu-modal">
            <div class="SelectMenu-list">
              <button class="SelectMenu-item" 
                      role="menuitem">Java</button>
              <button class="SelectMenu-item" 
                      role="menuitem">C++</button>
              <button class="SelectMenu-item" 
                      role="menuitem">Python</button>
              <button class="SelectMenu-item" 
                      role="menuitem">DSA</button>
            </div>
          </div>
        </div>
      </details>
    </div>

  </body>
</html>

Output:

Example 2: Below example demonstrates the Select Menu right-aligned with a margin of 6.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Primer CSS Select Menu Right aligned</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
</head>

<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Primer CSS Select Menu Right aligned</h2>
    </div>

    <div class="d-flex flex-justify-end position-relative m-6">
        <details class="details-reset details-overlay" open>
            <summary class="btn" aria-haspopup="true">
                Select Courses
            </summary>
            <div class="SelectMenu right-6">
                <div class="SelectMenu-modal">
                    <div class="SelectMenu-list">
                        <button class="SelectMenu-item" 
                                role="menuitem">Java</button>
                        <button class="SelectMenu-item" role="menuitem">C++</button>
                        <button class="SelectMenu-item" 
                                role="menuitem">Python</button>
                        <button class="SelectMenu-item" 
                                role="menuitem">
                            <svg class="SelectMenu-icon octicon octicon-pin" 
                                 viewBox="0 0 16 16" version="1.1"
                                width="16" height="16" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M10 1.2V2l.5 1L6 6H2.2c-.44 0-.67.53-.34.86L5 
                                       10l-4 5 5-4 3.14 3.14a.5.5 0 00.86-.34V10l3-4.5 
                                       1 .5h.8c.44 0 .67-.53.34-.86L10.86.86a.5.5 0 
                                       00-.86.34z">
                                </path>
                            </svg>
                            DSA</button>
                    </div>
                </div>
            </div>
        </details>
    </div>

</body>

</html>