How to create Right Aligned Menu Links using HTML and CSS ?

The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display contact us option on the right side of the bar. This design will make the website more attractive than the regular menu links. To create the right align menu links you just need HTML and CSS. Menu links should contain an important menu list that you want to display on the right side. The below example will illustrate the approach of the concept.

Creating the Structure: In this section, we will create a basic website structure to create a right-aligned menu links.



  • HTML code to make the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            How To Create Right Aligned Menu
            Links using HTML and CSS ?
        </title>
          
        <meta name="viewport"
            content="width=device-width, initial-scale=1">
    </head>
      
    <body>
          
        <!-- Navbar items -->
        <div id="navlist">
            <a href="#">Home</a>
            <a href="#">Our Products</a>
            <a href="#">Careers</a>
            <div class="navlist-right">
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>
            </div>
        </div>
      
        <!-- logo with tag -->
        <div class="content">
            <h1 style="color:green; padding-top:40px;">
                GeeksforGeeks
            </h1>
          
            <b>A Computer Science Portal for Geeks</b>
              
            <p>
                How many times were you frustrated while
                looking out for a good collection of
                programming/algorithm/interview questions?
                What did you expect and what did you get?
                This portal has been created to provide
                well written, well thought and well
                explained solutions for selected questions.
            </p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

Designing the Structure: In the previous section, we have created the structure of the basic website. In this section, we will design the structure for the navigation bar.

  • CSS code of structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
               
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: absolute;
            width: 100%;
        }
               
        /* styling navlist anchor element */
        #navlist a {
            float:left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
        .navlist-right{
            float:right;
        }
       
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>

    chevron_right

    
    

Combining the HTML and CSS code: This is the final code after combining the above two sections. You can see that Home, Careers and Our Products align-left as default but About us and Contact us aligned right.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How To Create Right Aligned Menu
        Links using HTML and CSS ?
    </title>
      
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
          
    <style>
           
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: absolute;
            width: 100%;
        }
           
        /* styling navlist anchor element */
        #navlist a {
            float:left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
        .navlist-right{
            float:right;
        }
   
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
  
<body>
      
    <!-- Navbar items -->
    <div id="navlist">
        <a href="#">Home</a>
        <a href="#">Our Products</a>
        <a href="#">Careers</a>
        <div class="navlist-right">
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
        </div>
    </div>
  
    <!-- logo with tag -->
    <div class="content">
        <h1 style="color:green; padding-top:40px;">
            GeeksforGeeks
        </h1>
      
        <b>A Computer Science Portal for Geeks</b>
          
        <p>
            How many times were you frustrated while
            looking out for a good collection of
            programming/algorithm/interview questions?
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        </p>
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.