title: Jetpack Compose - DropdownMenu / Composable is placed outside (the) Box
body: <p>I am trying to make a custom TopBar for my application and I want to have a <code>DropdownMenu</code> displayed in the top right corner of the screen. I have a <code>Box</code> that contains a <code>Row</code> (with some text and icons) and a <code>DropdownMenu</code> which is initially not displayed. When I click on an icon, the <code>DropdownMenu</code> is displayed, but outside the <code>Box</code>, so not where I intended. The code:</p>
  <pre><code>@Composable
  private fun TopBar {
      var expanded by remember { mutableStateOf(false) }
      Box(
          modifier = Modifier
              .border(1.dp, Color.Black)
      ) {
          Row(
              verticalAlignment = Alignment.CenterVertically
          ) {
              Text(
                  text = &quot;Ride history&quot;,
                  maxLines = 1,
                  fontSize = 25.sp
              )
  
              Row(
                  modifier = Modifier.fillMaxWidth(),
                  horizontalArrangement = Arrangement.End
              ) {
                  IconButton(
                      onClick = {}) {
                      Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                  }
                  IconButton(
                      onClick = { expanded = !expanded }) {
                      Icon(imageVector = Icons.Filled.Sort, contentDescription = null)
                  }
                  IconButton(
                      onClick = { findNavController().navigate(RideFragmentDirections.actionRideFragmentToSettingsFragment())}) {
                      Icon(imageVector = Icons.Filled.Settings, contentDescription = null)
                  }
              }
          }
          DropdownMenu(
              modifier = Modifier.align(Alignment.TopEnd),
              expanded = expanded,
              onDismissRequest = { expanded = false }
          ) {
              DropdownMenuItem(onClick = {}) {
                  Text(text = &quot;BlaBla&quot;)
              }
              DropdownMenuItem(onClick = {}) {
                  Text(text = &quot;BlaBla&quot;)
              }
          }
      }
  }
  </code></pre>
  <p>What I obtain:</p>
  <p><a href="https://i.stack.imgur.com/fCHjG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fCHjG.png" alt="enter image description here" /></a></p>
  <p>(I put a border around the Box to see its bounds)</p>
  <p>After I press the Sort button, the <code>DropdownMenu</code> appears, but it is placed outside the <code>Box</code>. I want it to be placed in the top right corner, over everything. What am I missing?</p>
  <p><strong>Update</strong></p>
  <pre><code>@Composable
  private fun TopBar() {
      var expanded by remember { mutableStateOf(false) }
      Box(
          modifier = Modifier
              .border(1.dp, Color.Black)
      ) {
          Row(
              verticalAlignment = Alignment.CenterVertically
          ) {
              Text(
                  text = &quot;Ride history&quot;,
                  maxLines = 1,
                  fontSize = 25.sp
              )
  
              Row(
                  modifier = Modifier.fillMaxWidth(),
                  horizontalArrangement = Arrangement.End
              ) {
                  IconButton(
                      onClick = {}
                  ) {
                      Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                  }
                  IconButton(
                      onClick = { expanded = !expanded }
                  ) {
                      Icon(imageVector = Icons.Filled.Sort, contentDescription = null)
                  }
                  IconButton(
                      onClick = {}
                  ) {
                      Icon(imageVector = Icons.Filled.Settings, contentDescription = null)
                  }
              }
          }
          Box(
              modifier = Modifier.fillMaxHeight().align(Alignment.TopEnd),
              contentAlignment = Alignment.TopEnd
          ) {
              DropdownMenu(
                  expanded = expanded,
                  onDismissRequest = { expanded = false }
              ) {
                  DropdownMenuItem(onClick = {}) {
                      Text(text = &quot;BlaBla&quot;)
                  }
                  DropdownMenuItem(onClick = {}) {
                      Text(text = &quot;BlaBla&quot;)
                  }
              }
          }
      }
  }
  </code></pre>
  <p>This yields:</p>
  <p><a href="https://i.stack.imgur.com/pS0g4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pS0g4.png" alt="enter image description here" /></a></p>