In Constellation, we going to explore "How we can add option in portal navigation utils".

Steps:

1. Create a custom dxcomponent references:

https://docs.pega.com/bundle/constellation-dx-components-88/page/constellation-dx-components/custom-components/lifecycle-dx-cosmos-components.html

Sample components:

https://github.com/pegasystems/constellation-ui-gallery

2. Create a view with <portal name> + Utils under the class data-portal eq., WebPortalUtils.

3. Update view metadata to point custom dxcomponent.

Sample component code:

import styled, { css } from 'styled-components';

import { Button, Icon, Tooltip, useElement } from '@pega/cosmos-react-core';

export default function EditOperator(props) {
  const { getPConnect } = props;

  const WrapperDiv = styled.div(() => {
    return css`
      .main-container {
        color: rgba(255, 255, 255, 0.7);
        background-color: rgba(255, 255, 255, 0);
        padding: calc(0.625rem) 0;
        position: relative;
        display: flex;
        align-items: center;
        font-weight: 600;
        text-decoration: none;
        width: 100%;
      }

      .main-container:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }

      .count-container {
        position: absolute;
        inset-inline-start: calc(2rem);
        top: calc(0.25rem);
        padding: 0 calc(0.25rem);
        display: inline-block;
        block-size: 1rem;
        border-radius: calc(4999.5rem);
        color: #ffffff;
        background-color: rgb(217, 28, 41);
        box-shadow: rgb(255 255 255 / 10%) 0px 0px 0px 0.0625rem inset;
        font-size: calc(0.75rem);
        font-weight: 700;
        line-height: normal;
        text-align: center;
        padding-inline: 0.5rem;
        margin: 0px;
      }

      .sub-container {
        flex-shrink: 0;
        margin: 0px calc(1.4375rem);
      }
    `;
  });

  const itemClick = () => {
    // Logic comes here
  };

  // For tooltip
  const [el, setEl] = useElement();

  return (
    <WrapperDiv>
      <Button variant='link' icon compact={false} onClick={itemClick} className='main-container' ref={setEl}>
        <span className='sub-container'>
          
          {el && (
            <Tooltip target={el} placement='right'>
              Edit profile
            </Tooltip>
          )}
          
          <Icon name='user-plus-solid' />
        </span>
        <span>Edit profile</span>
      </Button>
    </WrapperDiv>
  );
}