diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
index 1989d5040a..082cca5123 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
@@ -28,8 +28,12 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
   `
 );
 
-export const Title = styled.span`
+export const Title = styled.div`
   grid-area: title;
+  white-space: nowrap;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const StatusIconWrapper = styled.svg.attrs({
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
index b01e357a87..98cded2ae6 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
@@ -17,7 +17,7 @@ const ClusterTab: React.FC<ClusterTabProps> = ({
   toggleClusterMenu,
 }) => (
   <S.Wrapper onClick={toggleClusterMenu}>
-    <S.Title>{title}</S.Title>
+    <S.Title title={title}>{title}</S.Title>
 
     <S.StatusIconWrapper>
       <S.StatusIcon status={status} aria-label="status">