Open In App

Primer CSS Select Menu Right aligned

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Primer CSS Select Menu Right aligned

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>


Output:

Primer CSS Select Menu Right aligned

Reference: https://primer.style/css/components/select-menu#right-aligned



Last Updated : 31 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads