Different approaches to representing elements pulled out from the natural flow (menus, tooltips, etc)

Overlapping.re

let onClick = _ => send(ToggleMenu);

// The following is how elm-ui does it (translated to JSX)
// Pros: 
// - Relatively easy to understand
// - `Button` is any normal component
// - It's obvious that the container element can have all of the normal
//   layout props and decoration attributes
//
// Cons:
// - below/above/etc props don't allow much control over positioning
// - Components-as-props is a little weird to look at in JSX
let elmUI =
  <Button alignX=End onClick below={<Text> "I'm The Menu" </Text>}>
      <Text> "Toggle Menu" </Text>
  </Button>

// This was my original idea for an approach, before I looked
// at elm-ui for inspiration
// Pros:
// - Fine-grained control over position by specifying which
//   child corner aligns with which parent corner
//
// Cons:
// - Tuple syntax for children is kind of awkward in JSX
// - Introducing a special kind of Overlapping component to
//   manage this relationship is more to remember
// - It's a bit weird that `<Overlapping />` is the element
//   that aligns itself, not `<Button />`
let myComponent = 
  <Overlapping alignX=End parentCorner=SE childCorner=NE>
    ...(
      <Button onClick> <Text> "Toggle Menu" </Text> </Button>,
      <Text> "I'm The Menu" </Text>
    )
  </Overlapping>

Another option?

let parent =
  <Button ref=setParentRef alignX=End onClick>
    <Text> "Toggle Menu" </Text>
  </Button>;

let child =
  <Floating alignTo={state.parentRef} parentCorner=SW corner=NW>
    <Text> "I'm the Menu" </Text>
  </Floating>;

let render =
  <NavbarOrWhatever>
    parent
    child // technically child could be anywhere because it will attach to the `body`
  </NavbarOrWhatever>