Skip to Content (Press Enter)
UserImage.jpg
Goru jai sai raj kumar
32Views
4Comments
Solved
 How to Style Active and Inactive Menu Items in Layout Top Menu Web Block
Question
Mobile
Reactive
Best Practices
Front-end
OutSystems 11
Application Type
Traditional Web, Mobile, Reactive, Service

Hi everyone,

I am new to OutSystems frontend technologies and currently trying to learn different scenarios focusing on the frontend. Here’s what I’m trying to achieve:

  • When I click on any screen, the menu item for the active screen should be styled in blue, and the menu items for all other inactive screens should be styled in red.

For example:

  • When I click on Screen1, the menu item for Screen1 (active) should be styled in blue, and the menu items for Screen2, Screen3, etc. (inactive) should be styled in red. 
  • Conversely, when I click on Screen2, the menu item for Screen2 (active) should be styled in blue, and the menu items for Screen1, Screen3, etc. (inactive) should be styled in red.

Could someone guide me on how to implement this functionality? Any help or code snippets would be greatly appreciated! Additionally, I am eager to learn more frontend scenarios. If there are any guided paths or scenarios within the OutSystems platform or the OutSystems forums community, please let me know.

Thank you in advance!

0
0
03 Mar 2025
Copy Link
2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hello @Goru jai sai raj kumar ,

You’ll need to override the colors in the element classes.

In your case, you can add the following CSS classes to your theme:

.app-menu-links a{  

color: red;

}

.app-menu-links a:hover, .app-menu-links a.active{  

color: blue;

}

.layout:not(.layout-side) .app-menu-links a.active{ 

border-bottom: var(--border-size-m) solid blue;

}

This will be the result:


Additionally, this is a great starting point to learn more about front-end development in OutSystems: 

Becoming a Front-End Developer in OutSystems


See solution in context
0
0
03 Mar 2025
Copy Link
UserImage.jpg
Goru jai sai raj kumar

Thank you, @Mihai Melencu  your solution worked for me. I also want to express my gratitude to everyone else who responded to my query.


0
0
03 Mar 2025
Copy Link
2025-11-11 13-17-51
Rajan C

Hi Goru,

              You should Override the default classes of menu. Use the CSS below to achieve the desired result. 


.osui-submenu.active .osui-submenu__header__item,

.osui-submenu.active .osui-submenu__header__item a{

  color: blue;

}

.osui-submenu__header__item {

    color: red;

}

Also here is the link for front end developer guided path https://learn.outsystems.com/training/journeys/front-end-developer-650


0
0
03 Mar 2025
Copy Link
2022-12-30 07-28-09
Navneet Garg

Can you share more detail like oml or test link to check because this is already available in outsytsems menu block. You just need to override the css as your need (for color)



0
0
03 Mar 2025
Copy Link
2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hello @Goru jai sai raj kumar ,

You’ll need to override the colors in the element classes.

In your case, you can add the following CSS classes to your theme:

.app-menu-links a{  

color: red;

}

.app-menu-links a:hover, .app-menu-links a.active{  

color: blue;

}

.layout:not(.layout-side) .app-menu-links a.active{ 

border-bottom: var(--border-size-m) solid blue;

}

This will be the result:


Additionally, this is a great starting point to learn more about front-end development in OutSystems: 

Becoming a Front-End Developer in OutSystems


0
0
03 Mar 2025
Copy Link
UserImage.jpg
Goru jai sai raj kumar

Thank you, @Mihai Melencu  your solution worked for me. I also want to express my gratitude to everyone else who responded to my query.


0
0
03 Mar 2025
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.